欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

el-table 动态合并单元格

程序员文章站 2024-02-28 18:18:40
...
    const getSpanArr = (tableData) => {
      //页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
      data.spanArr = []
      data.pos = 0
      //遍历数据
      tableData.forEach((item, index) => {
        //判断是否是第一项
        if (index === 0) {
          data.spanArr.push(1)
          data.pos = 0
        } else {
          //不是第一项时,就根据标识去存储
          if (tableData[index].typeName === tableData[index - 1].typeName) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            data.spanArr[data.pos] += 1
            data.spanArr.push(0)
          } else {
            // 没有符合的数据时,要记住当前的index
            data.spanArr.push(1)
            data.pos = index
          }
        }
      })
    }


    const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex === 0) {
        const _row = data.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }javascript