el-table自定义合并行或列

川长思鸟来 2022-09-02 01:09 243阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

> ElementUI：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

模板部分：

<el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column prop="date" align="center" label="时间日期" width="120"></el-table-column>
          <el-table-column prop="time" label="单位" width="120"></el-table-column>
          <el-table-column prop="unit" label=""></el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值 1（元）">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值 2（元）">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="数值 3（元）">
          </el-table-column>
        </el-table>

js 部分

data() { 
      return { 
    	spanArr: [],
    	pos: 0
      }
    },
    watch: { 
      tableData: { 
        handler () { 
          this.getSpanArr(this.tableData)
        },
        immediate: true
      }
    },
    methods: { 
    	// 根据条件合并随意行数，因为合并的行数可能是不固定的（传入的data参数为从后台数据数据）
        getSpanArr(data) { 
          this.spanArr = []
          this.pos = 0
          for (var i = 0; i < data.length; i++) { 
            if (i === 0) { 
              // 如果是第一条记录（即索引是0的时候），向数组中加入１
              this.spanArr.push(1)
              this.pos = 0
            } else { 
              if (data[i].date === data[i - 1].date) { 
                // 如果date相等就累加，并且push 0 （这里的判断视自己的判定依据改变）
                this.spanArr[this.pos] += 1
                this.spanArr.push(0)
              } else { 
                // 不相等push 1
                this.spanArr.push(1)
                this.pos = i
              }
            }
          }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) { 
          // 用于设置要合并的列 0 表示第一列
          if (columnIndex === 0) { 
            const cRow = this.spanArr[rowIndex]
            const cCol = cRow > 0 ? 1 : 0
            return { 
              rowspan: cRow, // 合并的行数
              colspan: cCol // 合并的列数，为0表示不显示
            }
          }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20220829/48dafdd9e1954d559a175b4bc94764a1.png