el-table合并表格相同的行

2,828 阅读1分钟

element-ui 表格实现相同行单元格合并:

image.png

<template>
    <el-table
        ref="multipleTable"
        :data="dataFilter(tableData)"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 15px"
        border
        :span-method="arraySpanMethod"
        >
         <el-table-column
            prop="id"
            label="ID"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="num"
            label="编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            align="center"
            width="230"
          ></el-table-column>
     </el-table>
 
</template>
<script>
methods: {
    mergeRowMethod({ row, column, rowIndex, columnIndex }) {
       // 合并行  产品名字相同合并、我是合并第三列,所以合判断columnIndex是否等于2
      if (columnIndex === 2) {
        if (rowIndex === 0 || row.type != this.tableData[rowIndex-1].type) {
          let rowspan = 0;
          this.dataFilter(this.tableData).forEach( element => {
            if (element.type === row.type) {
              rowspan ++;
            }
          });
          return [rowspan, 1];
        }else {
          return [0, 0];
        }
      }
   },
}

 </script>