Vue Element table 合并行

本文主要是介绍Vue Element table 合并行，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

如题，有时候表格需要合并同行

<el-table :data="tableData" :span-method="objectSpanMethod" border>
...
</el-table>


export default {
    data() {
      pretreatmentNum：’‘，
      pretreatmentArr: [],  // 存放需要合并的单元格数据，数组中数字代表需要合并几个单元格
    }
}
methods: {
  ...
  deataPretreatment() {  // 在获取到表格数据渲染后调用该函数
      this.pretreatmentNum = 0;  // 存放当前需要合并单元格的索引
      this.pretreatmentArr = [];  // 存放需要合并的单元格数据，数组中数字表示需要合并几个单元格
      
      for (let i = 0; i < this.tableData.length; i++) {
        if (i == 0) {
          // 第一行、重新赋值
          this.pretreatmentArr.push(1);  // 这一行要显示以及行数
          this.pretreatmentNum = 0; // 显示的索引
        } else {
          if (this.tableData[i].trigger_id == this.tableData[i-1].trigger_id) {
            // 当前和上一个行相同，累积单元格个数
            this.pretreatmentArr[this.pretreatmentNum] += 1; // 累积合并的行数
            this.pretreatmentArr.push(0); // 当前行隐藏
          } else {
            // 当前数据和上一行不同
            this.pretreatmentArr.push(1); // 需要显示以及行数
            this.pretreatmentNum = i; // 显示的索引
          }
        }
      }
      // console.log(this.pretreatmentArr)
    },
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const arr = [0, 1, 12, 13, 14, 15 ,16]; // 需要合并处理的列
      for (let i = 0; i < arr.length; i++) {
        if (columnIndex == arr[i]) {
          const _row = this.pretreatmentArr[rowIndex]; // 取出当前存放行的合并状态，行索引对应的是否隐藏和显示及合并个数
          const _col = _row > 0 ? 1 : 0;  // 判断当前列是否要显示，行合并大于0，显示，列1；行合并等于0，隐藏，列0
          return {  // 合并：如 四行一列（rowspan:4,colspan: 1; 不合并：0行-0列）
            rowspan: _row,  // 合并的行数
            colspan: _col  // 合并的列数
          };
        }
      }
    } 
}

这篇关于Vue Element table 合并行的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！