element-ui 组件常见错误 confirm， 分页的切换页码改变，表格样式错位

一 / 使用确认组件时候 

this.$confirm('确认移除', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
}).then(() => {
       this.deleteFn("removeGroup",row); 
}).catch((error) => {
        console.log(error)
 });;

点击了确定，没有执行删除的方法，

经排查，原来 不仅进入了then中，还进行了catch中，说明，在then中有报错， 

打印错误定位，找到错误，更改后就好了

二 使用分页切换的时候，点击搜索之后，页码回到了第一页， 我想要的效果是搜索的时候，在哪页就是哪页，不进行跳转回第一页

<el-pagination @size-change="changePageSizeFn"  class="f-r" @current-change="changePageFn" :pager-count="5"
  :current-page.sync="pageOption.currPage" :page-sizes="pageOption.defaultpagesizes" :page-size="pageOption.defaultpagesize"
   layout="sizes, prev, pager, next, jumper" :total="tableOptions.total">
</el-pagination>

手动计算了当前的页码，对 pageOption.currPage 进行了赋值，发现依然回到第一页，

排查之后发现，两点

1）需要 :current-page.sync  必须写sync

2）需要将pageOption.currPage = 4 这个赋值，放在请求到表格数据之后

三、关于element-ui的表格，在不同的tab，来回切换的时候，不同tab下的表格会出现错位的情况

解决方法：1）官网上给了一个方法doLayout ，this.$refs.table.doLayout();

　　　　　　刚开始我的不知道为什么，提示报错doLayout不是一个函数，但是这个this.$refs.table 确实是拿到这个表格的dom元素，后来发现因为我的这个表格是封装的一个组件，我是直接在组件上写了ref=table，所以没有起作用，大家

　　　　　　可以试一下在el-table上加ref，估计会起作用；

　　　　    2）由于我第一次尝试doLayout不起作用，我就找了第二种方法，在切换的时候，给table组件身上加一个v-if，就解决了

三、关于element-ui的 文本域的问题

问题描述：在一个弹框中的三个步骤中，每个步骤中都一个各自的form表单，每个表单中都有一个input（type=‘textarea’）；我发现我在第二个步骤中改变input的大小的时候，会影响到第三步骤中的input的大小；毫无关联的两个input怎么会将高度 关联起来呢？

原因：经过一段时间，发现了 原因，平常我们的label都是一个常量，比如：label=“我是一个label”； 这样的话，就算每个lable都是这个名称也不会有影响；

　　  我的项目中需要有中英文切换，所以label是这样写的

　　   :label="$t('strategyCenter.args')" ，（第二个步骤中） 

          好巧的是，

　　　第三步骤中的那个input的label也是 用这个名称 所以第三步中的label  :label="$t('strategyCenter.args')"；

　　  导致两个没有关系的input产生了关联；

　　

解决：在中英文的文件中，再定义一个名称的变量，两个分开用就好了

四、关于element-ui的 radio的回显切换不生效的问题

问题描述：在编辑表单的时候，radio切换不生效

原因：因为这个radio是后来新加上的，但是原先的列表的数据中没有这个代表radio的字段；新增的是可以切换的，但是对原来的数据，编辑的时候，不生效

解决：在拿到要回显的数据data之后，先对数据增加改字段，然后对data进行深克隆；接着将data赋值给form

　　如：data - 在我点击当前列的编辑操作时获取到当前列的数据  returnForm.aa是radio  v-model绑定的值

　　　　此时新增的字段是aa；但是data中没有aa这个字段；手动添加data.aa = data.aa||"";

　　　　this.returnForm =  JSON.parse(JSON.stringify(data));

　　　　这样就可以解决了

　　

五、关于element-ui的 列合并

问题描述：在element-ui的table示例中，对table的合并单元格是固定的就第一行，两两合并，只能两两合并，实际项目中的需求是根据数据进行合并，我的原数据结构是，如下，同一数据源进行合并

data = [
    {
        source:"aa",
        fields:"aa_1",
        rules:[
            {fields:"aa_1"},
            {fields:"aa_2"},
            {fields:"aa_3",}
        ]
    },
   {
        source:"aa",
        fields:"aa_2",
        rules:[
            {field:"aa_1"},
            {field:"aa_2"},
            {field:"aa_3",}
        ]
    },
    {
        source:"aa",
        fields:"aa_3",
        rules:[
            {field:"aa_1"},
            {field:"aa_2"},
            {field:"aa_3",}
        ]
    },
    {
        source:"bb",
        fields:"bb_1",
        rules:[
            {field:"bb_1"}
        ]
    }
]                

要对数据进行处理

data.forEach(item=>{
    if(item.rule.length){
        item.rule.forEach((irm,irx)=>{
           if(irm.field == item.fields){
               item.ruleindex = irx;
            }
         });
     }else{
         item.ruleindex = 0;
     };
});
每次更换数据源的时候，ruleindex 从0开始

 官网中的方法：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {   //第一列
       if (rowIndex % 2 === 0) {  //每两行
            return {
              rowspan: 2,
              colspan: 1
            };
       } else {
           return {
             rowspan: 0,
             colspan: 0
           };
       }
   }
}

项目中使用的方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   let obj={};
   let num = row.rule.length;//项目中要合并的列数
   let rowNum = row.ruleindex; //给每一条数据都加一个标识索引
   let spanLists =[0,4,7]; //要合并的列的索引集合
   if (spanLists.includes(columnIndex)) {
       if (rowNum % num == 0) {
           obj = {
              rowspan:num,
              colspan:num>0?1:0
           };
        } else {
            obj= {
               rowspan: 0,
               colspan: 0
            };
        };
        return obj;
    }
}