关于element-ui中Table表格如何合并单元格

最新推荐文章于 2024-04-22 16:00:31 发布
最新推荐文章于 2024-04-22 16:00:31 发布
阅读量405 收藏
点赞数
分类专栏： element 文章标签： ui
原文链接：https://blog.csdn.net/weixin_38516688/article/details/86021359
版权

在这里插入图片描述
第二步：代码开撸
首先在data中新建变量

data() {
     return {
       skuListInfo: [ // 假数据
         {
           id: 1,
           name: '普通门店',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '1',
           productInfo: '日托',
           mergeId: 1,
           feeType: '1',
           feeTypeInfo: '学费',
           billing: '月/季/年制度',
         },
         {
           id: 2,
           name: '普通门店',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '2',
           productInfo: '晚托',
           feeType: '1',
           mergeId: 1,
           feeTypeInfo: '学费',
           billing: '月/季/年制度',
         },
         {
           id: 3,
           name: '普通门店',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '3',
           productInfo: '临时托',
           feeType: '1',
           mergeId: 1,
           feeTypeInfo: '学费',
           billing: '月/季/年制度',
         },
         {
           id: 4,
           name: '普通门店',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '4',
           productInfo: '越拖',
           feeType: '1',
           mergeId: 1,
           feeTypeInfo: '学费',
           billing: '月/季/年制度',
         },
         {
           id: 9,
           name: '普通门店',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '4',
           productInfo: '全部',
           feeType: '2',
           mergeId: 1,
           feeTypeInfo: '定金',
           billing: '月/季/年制度',
         },
         {
           id: 10,
           name: '普通门店',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '4',
           productInfo: '全部',
           feeType: '3',
           mergeId: 1,
           feeTypeInfo: '学杂费',
           billing: '月/季/年制度',
         },
         {
           id: 5,
           name: '团购',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '5',
           productInfo: '寒假托',
           feeType: '2',
           mergeId: 1,
           feeTypeInfo: '定金',
           billing: '月/季/年制度',
         },
         {
           id: 6,
           name: '团购',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '5',
           productInfo: '日托',
           feeType: '1',
           mergeId: 1,
           feeTypeInfo: '学费',
           billing: '月/季/年制度',
         },
         {
           id: 7,
           name: '团购',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '5',
           productInfo: '晚托',
           feeType: '1',
           mergeId: 1,
           feeTypeInfo: '学费',
           billing: '月/季/年制度',
         },
         {
           id: 8,
           name: '大客户',
           storeIds: [1, 2, 3, 4],
           storeIdInfo: '[1, 2, 3, 4]',
           productType: '6',
           productInfo: '暑假托',
           feeType: '3',
           mergeId: 1,
           feeTypeInfo: '学杂费',
           billing: '月/季/年制度',
         },
       ],
       typeNameArr: [],  // 第一列进行合并操作时存放的数组变量
       typeNamePos: 0, // 上面的数组的下标值
       storeArr: [],  // 第二列进行合并操作时存放的数组变量
       storePos: 0,// 上面的数组的下标值
       feeArr: [], // 第三列进行合并操作时存放的数组变量
       feePos: 0,// 上面的数组的下标值
     };
   },

接着初始化上述定义的变量

merage() {
        this.merageInit(); // 前文的初始化数据函数
        for (let i = 0; i < this.skuListInfo.length; i += 1) {
          if (i === 0) {
            // 第一行必须存在
            this.typeNameArr.push(1);
            this.typeNamePos = 0;
            this.storeArr.push(1);
            this.storePos = 0;
            this.feeArr.push(1);
            this.feePos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
            // 第一列 下面的是eslint的不限制语法
            // eslint-disable-next-line no-lonely-if 
            if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) {
              this.typeNameArr[this.typeNamePos] += 1;
              this.typeNameArr.push(0);
            } else {
              this.typeNameArr.push(1);
              this.typeNamePos = i;
            }
            // 第二列
            if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
              this.skuListInfo[i - 1].name) {
              this.storeArr[this.storePos] += 1;
              this.storeArr.push(0);
            } else {
              this.storeArr.push(1);
              this.storePos = i;
            }
            // 第三列
            if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo
              === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
              this.skuListInfo[i - 1].name) {
              this.feeArr[this.feePos] += 1;
              this.feeArr.push(0);
            } else {
              this.feeArr.push(1);
              this.feePos = i;
            }
          }
        }
      },

上述工作完成之后就到了最重要的一步-----使用element的自带函数

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) { // 用于设置要合并的列
      //   if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
      //     return {
      //       rowspan: 2, // 合并的行数
      //       colspan: 1, // 合并的猎术, 设置为0则直接不显示
      //     };
      //   }
      //   return {
      //     rowspan: 0,
      //     colspan: 0,
      //   };
      // }
        if (columnIndex === 0) {
          // 第一列的合并方法
          const row1 = this.typeNameArr[rowIndex];
          const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
          return {
            rowspan: row1,
            colspan: col1,
          };
        } else if (columnIndex === 1) {
          // 第二列的合并方法
          const row2 = this.storeArr[rowIndex];
          const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
          return {
            rowspan: row2,
            colspan: col2,
          };
        } else if (columnIndex === 2) {
          // 第三列的合并方法
          const row3 = this.feeArr[rowIndex];
          const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
          return {
            rowspan: row3,
            colspan: col3,
          };
        }
      },

完整使用

<template>
  <div>
    <div class="panel">
      1231
    </div>
    <div class="panel">
      <el-table :data="skuListInfo" :span-method="objectSpanMethod" border>
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="storeIds" label="适应门店">
        </el-table-column>
        <el-table-column prop="feeTypeInfo" label="费用类型">
        </el-table-column>
        <el-table-column prop="productInfo" label="适用产品">
        </el-table-column>
        <el-table-column prop="billing" label="计费方法">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        skuListInfo: [
          {
            id: 1,
            name: '普通门店',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '1',
            productInfo: '日托',
            mergeId: 1,
            feeType: '1',
            feeTypeInfo: '学费',
            billing: '月/季/年制度',
          },
          {
            id: 2,
            name: '普通门店',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '2',
            productInfo: '晚托',
            feeType: '1',
            mergeId: 1,
            feeTypeInfo: '学费',
            billing: '月/季/年制度',
          },
          {
            id: 3,
            name: '普通门店',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '3',
            productInfo: '临时托',
            feeType: '1',
            mergeId: 1,
            feeTypeInfo: '学费',
            billing: '月/季/年制度',
          },
          {
            id: 4,
            name: '普通门店',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '4',
            productInfo: '越拖',
            feeType: '1',
            mergeId: 1,
            feeTypeInfo: '学费',
            billing: '月/季/年制度',
          },
          {
            id: 9,
            name: '普通门店',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '4',
            productInfo: '全部',
            feeType: '2',
            mergeId: 1,
            feeTypeInfo: '定金',
            billing: '月/季/年制度',
          },
          {
            id: 10,
            name: '普通门店',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '4',
            productInfo: '全部',
            feeType: '3',
            mergeId: 1,
            feeTypeInfo: '学杂费',
            billing: '月/季/年制度',
          },
          {
            id: 5,
            name: '团购',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '5',
            productInfo: '寒假托',
            feeType: '2',
            mergeId: 1,
            feeTypeInfo: '定金',
            billing: '月/季/年制度',
          },
          {
            id: 6,
            name: '团购',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '5',
            productInfo: '日托',
            feeType: '1',
            mergeId: 1,
            feeTypeInfo: '学费',
            billing: '月/季/年制度',
          },
          {
            id: 7,
            name: '团购',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '5',
            productInfo: '晚托',
            feeType: '1',
            mergeId: 1,
            feeTypeInfo: '学费',
            billing: '月/季/年制度',
          },
          {
            id: 8,
            name: '大客户',
            storeIds: [1, 2, 3, 4],
            storeIdInfo: '[1, 2, 3, 4]',
            productType: '6',
            productInfo: '暑假托',
            feeType: '3',
            mergeId: 1,
            feeTypeInfo: '学杂费',
            billing: '月/季/年制度',
          },
        ],
        typeNameArr: [],
        typeNamePos: 0,
        storeArr: [],
        storePos: 0,
        feeArr: [],
        feePos: 0,
        hoverOrderArr: [],
      };
    },
    mounted() {
      this.merage();
    },
    methods: {
      merageInit() {
        this.typeNameArr = [];
        this.typeNamePos = 0;
        this.storeArr = [];
        this.storePos = 0;
        this.feeArr = [];
        this.feePos = 0;
      },
      merage() {
        this.merageInit();
        for (let i = 0; i < this.skuListInfo.length; i += 1) {
          if (i === 0) {
            // 第一行必须存在
            this.typeNameArr.push(1);
            this.typeNamePos = 0;
            this.storeArr.push(1);
            this.storePos = 0;
            this.feeArr.push(1);
            this.feePos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
            // 第一列
            // eslint-disable-next-line no-lonely-if
            if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) {
              this.typeNameArr[this.typeNamePos] += 1;
              this.typeNameArr.push(0);
            } else {
              this.typeNameArr.push(1);
              this.typeNamePos = i;
            }
            // 第二列
            if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
              this.skuListInfo[i - 1].name) {
              this.storeArr[this.storePos] += 1;
              this.storeArr.push(0);
            } else {
              this.storeArr.push(1);
              this.storePos = i;
            }
            // 第三列
            if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo
              === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
              this.skuListInfo[i - 1].name) {
              this.feeArr[this.feePos] += 1;
              this.feeArr.push(0);
            } else {
              this.feeArr.push(1);
              this.feePos = i;
            }
          }
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) { // 用于设置要合并的列
      //   if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
      //     return {
      //       rowspan: 2, // 合并的行数
      //       colspan: 1, // 合并的猎术, 设置为0则直接不显示
      //     };
      //   }
      //   return {
      //     rowspan: 0,
      //     colspan: 0,
      //   };
      // }
        if (columnIndex === 0) {
          // 第一列的合并方法
          const row1 = this.typeNameArr[rowIndex];
          const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
          return {
            rowspan: row1,
            colspan: col1,
          };
        } else if (columnIndex === 1) {
          // 第二列的合并方法
          const row2 = this.storeArr[rowIndex];
          const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
          return {
            rowspan: row2,
            colspan: col2,
          };
        } else if (columnIndex === 2) {
          // 第三列的合并方法
          const row3 = this.feeArr[rowIndex];
          const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
          return {
            rowspan: row3,
            colspan: col3,
          };
        }
      },
    },
  };
</script>
Amnesia�
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
element-ui中的el-table合并单元格
m0_63026408的博客
08-24 7667
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据。处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。发送消息有两种方式，分别是。对象，并将读取到的数据存入。方式当数据量过大时，由于。
elementUI中table单元格的合并，通用版
weixin_46103180的博客
09-21 5661
elementUI中table单元格的合并，通用版
Vue+elementUI的el-table组件，合并单元格，勾选之后，复制、新增、删除、批量复制、批量删除功能
最新发布
weixin_45926119的博客
04-22 1130
注：N20是我们公司自己封装的组件，但是底层还是elementUI，结构并不是很重要，主要是结构上的:span-method="objectSpanMethod"方法。5）、表格里面也有新增和删除功能，删除是删除当前行，新增是新增到当前行的下面，并且前面列动态合并，序号也重新排序；4）、勾选复选框，点击复制，复制所选的数据到列表最下方，并且序号重新排序；3）、批量删除，勾选复选框点击删除，删除所勾选的数据，并且序号重新排序；2）、点击新增，表格里面内容新增一行新的数据到最下方，并且序号加一；
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
热门推荐
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
element ui 的table单元格合并
weixin_46103180的博客
04-12 1万+
elementUI的table表格实现单元格合并
element-ui中Table表格省市区合并单元格的方法实现
10-16
主要介绍了element-ui中Table表格省市区合并单元格的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
本文将详细介绍如何在Vue中使用Element-UI的`el-table`组件来合并上下两行相同数据的单元格。 首先，我们需要在HTML模板中设置`el-table`组件。在以下示例中，我们定义了一个表格，包含四个列（项目名称、污染区段...
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element-ui——table实现单元格合并及取消合并功能——基础积累
yehaocheng520的博客
01-19 4256
最近在做后台管理系统，遇到一个需求就是：单元格的合并，具体功能如下： 左侧是个expand的展开和折叠功能，展开行后，需要取消单元格的合并功能。 1.处理table表格的数据——将相邻且相同的单元格合并成数组 data(){ return{ serialArr: [], materialTypeArr: [], tagNumberArr: [], objectSpanFlag:true,//是否开始单元格的合并 expandedRow
vue+element实现sku表格
02-12
vue编写，基于elementUI实现的商品库存表格，添加属性和规格，自动生成对应表格
vue中Element-ui 表格 (Table)合并行、列单元格
weixin_45618937的博客
02-21 6422
vue中Element-ui 表格 (Table)合并行、列单元格
elementUI表格合并单元格
L221545的博客
05-26 1148
elementUI表格合并单元格
elementui table动态数据合并单元格
晓光同学的博客
05-10 952
data() {return {//表头{ prop: 'firstLevelIndex', lable: '一级指标', width: '150' },//需要合并的字段{ prop: 'secondLevelIndex', lable: '二级指标', width: '150' },//需要合并的字段{ prop: 'indexDesc', lable: '指标描述', width: '400' },//需要合并的字段。
vue+elementui 实现合并多个单元格
weixin_45069190的博客
09-27 848
合并单元格
element-ui表格的合并单元格（合并行合并列
JandyPam的博客
05-18 414
解决element ui表格组件合并单元格的问题
element用法总结
香蕉你个芭呐呐的博客
12-23 3048
表格合并单元格 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 如下：合并列 html...
loadrunner Analysis分析图合并
滴水穿石
11-26 1070
分析器保存的图都是单个图片，在分析结果中发现，仅仅靠单个图片的分析是不够的，单个图片只是从单个的度量角度去分析结果，并没有从多个角度去度量测试结果。analysis可以将同一个方案中的两个数据图合并到一个数据图中。通过怼分析图进行合并，可以同时从多个角度去度量结果并且可以观察两个视图之间的关系。 操作：直接右键—Merge Graphs 1.选择要合并的图。选择一个要与当前活动图合并的图。注意：合并的图只能选择X轴度量单位相同的图。 2.选择合并类型。三种类型：叠加、平铺和关联。这三种合并方式的不同之处
vue+element-ui table 单元格动态合并
04-24
好的，关于vue element-ui table单元格动态合并，我可以给你一些思路和建议。你可以使用element-ui table的slot-scope特性，对单元格进行自定义渲染，通过计算相邻单元格内容是否相等，来实现单元格的动态合并。具体的实现方式可以参考element-ui官网提供的实例和文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值