element表格-动态表格数据行合并

数据表的第一行合并

页面效果

表格数据格式

代码如下

html代码
 <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
   <el-table-column prop="相关数据">
   </el-table-column>
     <el-table-column prop="相关数据">
   </el-table-column>
 </el-table>


js代码
create(){
   this.setdates(this.tableData)
}
  methods: {
    // 表格数据行动态合并
    setdates (arr) {
      var obj = {},
        k, arr1 = [];
      for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i].type;//需要合并的字段
        if (obj[k])
          obj[k]++;
        else
          obj[k] = 1;
      }
      // console.log(obj)
      //保存结果{el-'元素'，count-出现次数}
      for (var o in obj) {
        for (let i = 0; i < obj[o]; i++) {
          if (i === 0) {
            this.arr1.push(obj[o])
          } else {
            this.arr1.push(0)
          }
        }
      }
      //  console.log(this.arr1);

    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let _row = this.arr1[rowIndex]
        let _col = this.arr1[rowIndex] > 0 ? 1 : 0
        return [_row, _col]
      }
    },
   }