el-table合并一列中数据相同的单元格

Avery233

已于 2022-06-10 17:30:24 修改

阅读量3.8k

点赞数 10

分类专栏： vue+elementUi js 文章标签： javascript

于 2022-05-17 16:52:14 首次发布

本文链接：https://blog.youkuaiyun.com/Avery233/article/details/124824844

版权

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue+elementUi

5 篇文章

订阅专栏

本文介绍了如何在ElementUI表格中使用span-method方法，通过objectSpanMethod函数来合并表格数据，特别关注类名和小类列的合并逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html相关代码

即普通的ElementUI的表格插件传入span-method方法：

<el-table :data="tableData" border class="tableDataF" :span-method="objectSpanMethod">
    <el-table-column label="类名" align="center" prop="class"></el-table-column>
    <el-table-column label="小类" align="center" prop="classify"></el-table-column>
    <el-table-column label="名称" align="center" prop="name"></el-table-column>
    <el-table-column label="编码" align="center"></el-table-column>
    <el-table-column label="数量" align="center"></el-table-column>
    <el-table-column label="合计" align="center"></el-table-column>
</el-table>

js相关代码

span-method方法绑定的objectSpanMethod函数中对数据进行处理：

export default {
  data() {
    return {
       tableData: [],
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //columnIndex 表示需要合并的列，多列时用 || 隔开
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    filterData(arr, colIndex) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index == 0) {
          spanOneArr.push(1);
        } else {
           //class 和classify 分别表示表格数据第一列和第二列对应的参数字段，根据实际参数修改
          if (colIndex == 0) {
            if (item.class === arr[index - 1].class) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);  
              concatOne = index;
            }
          } else {
            if (item.classify === arr[index - 1].classify) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);  
              concatOne = index;
            } 
          }
        }
      });
      return {
        one: spanOneArr,
      };
    }
  }
}