el-table动态合并行列

一、场景

根据接口返回数据，将ID相同的数据进行合并。

el-table自带的方法可以固定的合并，但是不能够随机分。

 

二、思路

先将查询出的列表数据分出哪几列以及哪几行需要进行合并，并且合并多少行或多少列；如spanArr

再将这些数据记录（spanArr）放进一个空数组中，合并的时候再根据这个数组进行相应的合并。

通过添加 :span-method="objectSpanMethod" 来自定义合并规则。

方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

 <el-table
      :data="tableData"
      :span-method="objectSpanMethod">
      <el-table-column  prop="firstNodeName" label="考核内容">
      </el-table-column>
      <el-table-column prop="secondNodeName" label="考核项目">
      </el-table-column>
      <el-table-column  prop="shortName"  label="评价项目">
      </el-table-column>
       <el-table-column  prop="standard" label="考核标准">
      </el-table-column>
     <el-table-column fixed prop="evaluateScoreType" label="分值" >
     </el-table-column>
</el-table> 

JS代码：

methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     //row:对象形式，保存了当前行的数据 
     //column：对象形式，保存了当前列的参数 
     //rowIndex:当前行的行号 
     //column：当前列的列号
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,  //rowspan:单元格可横跨的行数
          colspan: _col,  //colspan:单元格可横跨的列数 
        }
      } else if (columnIndex === 1) {
        const _row = this.contentSpanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0 //等于0表示不合并
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },

    rowspan() {
      this.indexList.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
          this.contentSpanArr.push(1)
          this.pos = 0
        } else {
          //判断当前元素与上一行元素是否相同（第一列和第二列）
          if (this.indexList[index].firstNodeName === this.indexList[index - 1].firstNodeName) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
          // 第三列
          if (this.indexList[index].secondNodeName === this.indexList[index - 1].secondNodeName) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.pos = index
          }
        }
      })
    },
}

 

三、数据处理

<el-table :data="tableData"></eltable>只能渲染一个数组中保存多条扁平化的对象类型数据,

如果接口返回的数据格式不符合这个渲染格式需要先处理数据。

 tableData: [{
          id: '12987122',
          name: '张三',
          amount1: '234',
          amount2: '8',
        }, {
          id: '12987123',
          name: '王李四',
          amount1: '165',
          amount2: '9',
        }]

 

四、表格合并方法

objectSpanMethod中写的是合并规则。在这之前先找出需要合并的单元格。

通过getSpanArr(),该方法需要加在页面渲染之前获取列表数据的方法中并传入列表需要渲染的数据作为参数。

//因为要合并的行数是不固定的，此函数实现随意合并行数的功能

//spanArr初始为一个空的数组，用于存放每一行记录的合并数

getSpanArr（）{
　　this.indexList.forEach((item, index) => {
        if (index === 0) {
          //如果是第一条数据，向数组中加1，占住位置
          this.spanArr.push(1)  
          this.position = 0
        } else {
          if (this.indexList[index].parentId === this.indexList[index - 1].parentId) {
            //如果parentId相同, 合并行数加1，
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            //数组后移1位
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
}

//实现parentId相同的值合并

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

效果：

 

 

 参考;https://www.cnblogs.com/qjh0208/p/14108189.html