合并单元格

最新推荐文章于 2024-11-18 23:23:32 发布

我在学习呢

最新推荐文章于 2024-11-18 23:23:32 发布

阅读量228

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42540974/article/details/132295679

版权

需求：
合并相同名称的产品
在这里插入图片描述
先说下elementUI合并单元格的方法，先计算好要合并的行数rowspan，return {rowspan，colspan}，其他的单元格return{0,0}

    getData(params) {
	  //临时数组，存放产品名称相同的数量
      this.tempArr = []
      getTableData(params).then(response => {
        this.tableData = response.data
        //获取到表格数据后，通过遍历获取各个产品的数量
        for (let i = 0; i < this.tableData.length; i++) {
          if (i === 0) {
            this.tempArr.push(1) 
          } else {
            //一样的产品Id就累加产品数量，用0补齐要合并的位置
            if (this.tableData[i].prod_id === this.tableData[i - 1].prod_id) {
              this.tempArr[pos] += 1 
              this.tempArr.push(0)
            } else {
              this.tempArr.push(1)
              pos = i
            }
          }
        }
      })
    },

    spanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (this.tempArr[rowIndex]) {
          return {
            rowspan: this.tempArr[rowIndex],
            colspan: this.tempArr[rowIndex] > 0 ? 1 : 0,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },

合并固定的两行单元格

在这里插入图片描述

spanMethod({ row, column, rowIndex, columnIndex }){
      ...
      //12列之前合并起来
      if (columnIndex < 12) 
        if (rowIndex % 2 === 0) {
          return {rowspan: 2, colspan: 1}
        } else {
          return {rowspan: 0, colspan: 0}
        }
      }
    },