el-table 怎么合并相同单元格

最新推荐文章于 2024-05-23 14:42:14 发布

shaoin_2

最新推荐文章于 2024-05-23 14:42:14 发布

阅读量4.9k

点赞数 6

分类专栏： vscode Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_49175501/article/details/128873185

版权

vscode Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js项目中，如何利用el-table组件的:span-method属性和自定义方法objectSpanMethod来实现表格中相同类型数据的单元格合并。通过处理tableData和维护rowSpanArr数组，动态计算行合并的数量。

摘要由CSDN通过智能技术生成

问题背景

项目需求table表格中，相同的类型合并成一个单元格展示。

问题描述

el-table并没有相关的语法直接合并，需要我们自己传入一个方法返回一个数组格式，来确定要合并行列。

效果图

解决问题

首先需要在 el-table 标签上绑定:span-method="objectSpanMethod"

<el-table :data="tableData" :span-method="objectSpanMethod" >
    <el-table-column prop="projectName" label="订单类型" />  
</el-table>

再去methods中定义 objectSpanMethod 方法，data中定义一个rowSpanArr参数

// 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
handleTableData(tableData){
      let rowSpanArr = [], position = 0;
      for (let [index, item] of tableData.entries()) {
        if (index == 0) {
          rowSpanArr.push(1);
          position = 0;
        } else {
          if (item.projectName == tableData[index - 1].projectName) {
            rowSpanArr[position] += 1; //项目名称相同，合并到同一个数组中
            rowSpanArr.push(0);
          } else {
            rowSpanArr.push(1);
            position = index;
          }
        }
      }
      this.rowSpanArr = rowSpanArr
}
// 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
objectSpanMethod({ row, column, rowIndex, columnIndex }){
     if (columnIndex === 0) {
        const rowSpan = this.rowSpanArr[rowIndex];
        return {
          rowspan: rowSpan, //行
          colspan: 1 //列
        };
      }
}

扩展

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) { // 判断是不是第一列，只有第一列才执行合并
      if (rowIndex % 2 === 0) { // 判断能不能被2整除
          return {
            rowspan: 2, // 从当前单元格开始，执行合并2行
            colspan: 1, // 从当前单元格开始，执行合并1列
          };
       } else {
         return { // 第一列的其他元素不执行合并
           rowspan: 0, // 为0，不执行合并
           colspan: 0  // 为0，不执行合并
         };
       }
    }
 }