vue2+element-ui表格组件合并单元格的几种情况

努力做大佬的小佬的徒弟

已于 2023-09-15 10:29:46 修改

阅读量4k

点赞数 4

分类专栏：工作小结文章标签： vue.js 前端 elementui

于 2023-09-14 22:26:27 首次发布

本文链接：https://blog.csdn.net/2301_76925705/article/details/132866522

版权

工作小结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一种场景：第一行（表头）单独一行

代码：

第二种场景：最后一列的前几行合并

代码：

setrowSpan(){
// 获取表格body的所有单元格
var x = document.getElementsByClassName('el-table body')[0].rows[0].cells;
// 将最后一列表格单元格的rowSpan设为4
x[6].rowSpan = 4;
}
mounted() {
this.$nextTick(()=>{
this .setrowSpan()
})

解释：1.colSpan是跨越多列，设置当前单元格横跨的列数；rowSpan是跨越多行，设置当前单元格横跨的行数2.mounted里面：注意一定要保证DOM渲染完成后再进行合并，否则会找不到元素，所以使用this.$nextTick(()=>{})

或者这样，根据业务场景来，和第二种一样，只不过位置变了

methods :{
  setColspan(){
      console.log(document.getElementsByClassName("el-table header"))
      //获取表头的所有单元格
      var x = document.getElementsByClassName( 'el-table header ')[0].rows[0].cells
      // 将第二列表头单元格的colSpan 设为2
      x[0].colSpan = 3
      // 将第二列表头单元格的display设为none
      x[2].style.display = 'none'
   }
}

第三种场景：某一列前几行/列合并，后几行/列合并

在<el-table上添加:span-method="arraySpanMethod"方法

这个第二种方法不能用，这个是vue-elementul表格动态合并实现方法，合并行，合并列方法，任何场景都适用

代码：

mounted() {
    //清空合并坐标
    this.spanArr = []; //每行合并数
    this.pos = 0; //角标索引
    this.getSpanArr(this.tableData); //先处理数据，把表格数据放进去
  },
methods: {
    // 竖着合并处理数据
    getSpanArr(data) {
      // 循环
      for (var i = 0; i < data.length; i++) {
        // 循环的第一行默认角标给个0，合并数给个1，因为rowspan和colspan需要默认是1，如果是0的话就不显示这个单元格了
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          //这里已经循环到第二行了才会走这里
          // 判断当前行的某一个字段和上一行的某一个字段是否相同？
          if (data[i].number === data[i - 1].number) {
            //如果相同代表要合并，就给上一个元素合并数+1。
            this.spanArr[this.pos] += 1; //这里pos是0。所以是给spanArr内第一条数据的合并数加了1，变成了2，代表从第一行开始合并1格，记住，1是默认有一格，没加1代表合并一格
            this.spanArr.push(0); //然后再往spanArr内添加一个0。为什么要这么做呢，因为这里push进去0是加在第二个数据上的。合并的方法内写法是，1代表有数据，每加1代表合并一格，如果是0代表隐藏这一格，上面我们已经变成2了，所以合并一格，合并的就是第二格的数据，如果我们不给第二格的数据改为0.那么第二格的数据会显示，但是被挤在边上，所以这里给0让第二格数据隐藏
          } else {
            this.spanArr.push(1); //反之，如果不等于那就正常给个1显示数据但是不合并。
            this.pos = i; //pos的角标也改为当前的循环。方便下一次循环的时候如果两个字段相同，合并数直接从下一个角标算起
          }
        }
      }
    },
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //横向合并
      //角标为2的行，按顺序012也就是第三行数据
      if (rowIndex === 2) {
        //从第一列开始
        if (columnIndex === 0) {
          //两个参数：竖着合并几位，横向合并几位
          return [1, 3];
        } else if (columnIndex === 1) {
          //这里的意思是第二列不显示，0代表不显示，如果不写这个，那么上面合并的时候就会把这列的数据给挤到旁边去。
          return [0, 0];
        } else if (columnIndex === 2) {
          //这里同理。你需要合并到多少列就把多少列的数据00隐藏掉。
          return [0, 0];
        }
      }

      // 竖向合并
      if (columnIndex === 0) {
        //第一列    //this.spanArr目前的值是[2, 0, 1, 1, 2, 0]
        const _row = this.spanArr[rowIndex]; //这里拿到spanArr内的第一个数据，我们上面处理时第一个数据是2，所以是合并一格的意思
        const _col = _row > 0 ? 1 : 0; //这里判断2大于0所以col的值是1，代表正常显示
        return {
          rowspan: _row, //这里是2，代表竖着合并数一格
          colspan: _col, //这里是1，代表显示这一格，但是被上面的合并了，所以看不到这个值。如果为0，这一列就不显示了
        };
        //这个位置，else if在来一次，1是角标，代表数组中的角标1，也就是第二列。如果你还想第三列参与合并，那就再else if (columnIndex === 2)，以此类推就行。
      } else if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};