element表单多列合并

1.定义全局公共方法，挂在在vue上，便于调用

Vue.prototype.dataMethod=function(data,isH,p){

//spanObj 存储每个key dataMethod应的合并值
//pos  存储的是 key合并值得索引 大概吧
  let [spanObj, pos] = [{}, {}];
  //循环数据
  for (let i in data) {
    let dataI = data[i];
    //循环数据内对象，查看有多少key
    for (let j in dataI) {
      //如果只有一条数据时默认为1即可，无需合并
      if (i == 0) {
        spanObj[j] = [1];
        pos[j] = 0;
      } else {
        let [e, k] = [dataI, data[i - 1]];
        //判断上一级别是否存在 ，
        //存在当前的key是否和上级别的key是否一样
        //判断是否有数组规定只允许那几列需要合并单元格的
        debugger
        if (k && e[j] == k[j]&&e[p]==k[p] && ((!isH || isH.length == 0) || isH.includes(j))) {
          //如果上一级和当前一级相当，数组就加1 数组后面就添加一个0
          spanObj[j][pos[j]] += 1;
          spanObj[j].push(0)
        } else {
          spanObj[j].push(1);
          pos[j] = i;
        }
      }
    }
  }
  return spanObj;

}

2.在调用的页面methods钩子内定义一个方法

data(){ return { tableData:[],//列表数据 spanObj:{}//定义一个对象 } }

methods：{

   objectSpanMethod({ row, column, rowIndex, columnIndex }){

    //判断合并列
    let _row = this.spanObj[column.property]?this.spanObj[column.property][rowIndex]:1;
    let _col = _row>0?1:0;
    return {
      rowspan: _row,
      colspan: _col
    }
  },

}

3.在获取列表成功后调用该方法

this.spanObj = this.dataMethod(res.records ,['parentName','province'],'parentName');