element table表格行列合并span-method，根据数据动态行列合并

news2024/12/24 20:41:41

表格行列合并需要用到 table的方法 span-method

在这里插入图片描述

根据数据来进行动态的行列合并，实例如下：

 <el-table
      :data="tableData"
      :span-method="objectSpanMethod" 
      style="width: 100%">
      <el-table-column
        prop="key"
        label="分类"
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
    </el-table>
let data = [
	{ key:'test1', id:0, name:'xxx' },
	{ key:'test1', id:1, name:'xxx' },
	{ key:'test2', id:2, name:'xxx' },
	{ key:'test1', id:3, name:'xxx' },
	{ key:'test2', id:4, name:'xxx' },
	{ key:'test1', id:5, name:'xxx' },
]

我们要根据 key 进行列合并，将test1合并到一起，test2合并到一起

//先处理数据
let one = data.filter(item => item.key === 'test1')
let two= data.filter(item => item.key === 'test2')

//保证test1 在一堆，test2在一堆
tableData = one.concat(two)

//列合并方法
objectSpanMethod =({ row, column, rowIndex, columnIndex })=>{
	const { key } = row
        // test1 使用 rowIndex作为开始
        // test2 采用rowIndex - test1 长度开始
        let last = rowIndex - one.length
        if (columnIndex === 0) { //判断是否是第一列
          if(key === 'test1'){ //判断合并项 R1 R2
             if (rowIndex % one.length === 0) {
              return {
                rowspan: one.length, // 需要合并的行数
                colspan: 1
              }
            }else{ //不在范围内 直接返回默认
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }else if(key === 'test2'){
            if(last % two.length === 0){
              return {
                rowspan: two.length, // 需要合并的行数
                colspan: 1
              }
           }else{
            return {
              rowspan: 0,
              colspan: 0
            }
           }
          }  
        }
}