el-table: 相同内容则自动合并行 mix 手动进行某几行的合并

最新推荐文章于 2024-08-30 09:35:19 发布

原创最新推荐文章于 2024-08-30 09:35:19 发布 · 591 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

element

在el-table组件中，通过设置:span-method属性并定义objectSpanMethod方法，可以实现相同内容单元格的自动行合并。同时，也可以根据需求手动控制特定行的合并。在表格数据加载完成后，调用rowspan方法来处理行合并。

给el-table加上:span-method="objectSpanMethod"方法

 <el-table :data="tableData"
         :span-method="objectSpanMethod">
 <el-table-column width="80"
                  prop="order"
                  label="序号"
                  align="center"></el-table-column>
 <el-table-column prop="year"
                  label="年度"
                  align="center"></el-table-column>
 <el-table-column prop="base"
                  label="递延额度基数"
                  align="center"></el-table-column>
 <el-table-column prop="check"
                  label="核定递延额度"
                  align="center"></el-table-column>
 <el-table-column prop="actual"
                  label="实际兑现额度"
                  align="center"></el-table-column>
</el-table>

data声明变量

data(){
   tableData:[], // 表格数据
   spanArr: [], // 合并行用
   position: 0  // 合并行用
}

获取表格数据后调用rowspan方法(拿到表格数据后再调用！)

rowspan () {
  this.spanArr = []
   this.position = 0
   this.tableData.forEach((item, index) => {
     if (index === 0) {
       this.spanArr.push(1)
       this.position = 0
       item.sequence = index + 1 // 设置序号
     } else {
       if (this.tableData[index].order === this.tableData[index - 1].order) {
         this.spanArr[this.position] += 1
         this.spanArr.push(0)
         // 当项目名称相同时，设置当前序号和前一个相同
         this.tableData[index].sequence = this.tableData[index - 1].sequence
       } else {
         this.spanArr.push(1)
         this.position = index
         // 当项目名称不同时，将当前序号设置为前一个序号+1
         this.tableData[index].sequence = this.tableData[index - 1].sequence + 1
       }
     }
   })
 },
 objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
   // 手动设置: 第三列和第四列每4行合并(不需要则不用设)
   if (columnIndex === 2 || columnIndex === 3) {
     if (rowIndex % 4 === 0) {
       return {
         rowspan: 4,
         colspan: 1
       }
     } else {
       return {
         rowspan: 0,
         colspan: 0
       }
     }
    // 自动合并: 第一列和第二列行内容相同则合并
   } else if (columnIndex === 0 || columnIndex === 1) {
     const _row = this.spanArr[rowIndex]
     const _col = _row > 0 ? 1 : 0
     return {
       rowspan: _row,
       colspan: _col
     }
   }
 }