Element-UI中el-table如何合并相同单元格

 更新时间:2023年08月02日 09:46:07   作者:shaoin_2  
这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

问题背景

项目需求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,不执行合并
         };
       }
    }
 }

总结

到此这篇关于Element-UI中el-table如何合并相同单元格的文章就介绍到这了,更多相关el-table合并相同单元格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue如何在store仓库中使用路由

    vue如何在store仓库中使用路由

    这篇文章主要介绍了vue如何在store仓库中使用路由,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue实现搜索 和新闻列表功能简单范例

    Vue实现搜索 和新闻列表功能简单范例

    本文通过实例代码给大家介绍了Vue实现搜索 和新闻列表功能简单范例,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2018-03-03
  • vue3.x使用swiperUI动态加载图片失败的解决方法

    vue3.x使用swiperUI动态加载图片失败的解决方法

    这篇文章主要为大家详细介绍了vue3.x使用swiperUI动态加载图片失败的解决方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 基于Vue实现拖拽功能

    基于Vue实现拖拽功能

    这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • vue watch中如何获取this.$refs.xxx节点

    vue watch中如何获取this.$refs.xxx节点

    这篇文章主要介绍了vue watch中获取this.$refs.xxx节点的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue实现路由鉴权和不同用户登录

    vue实现路由鉴权和不同用户登录

    这篇文章主要为大家详细介绍了vue中实现路由鉴权和不同用户登录的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • Vue3中如何使用rem来控制字体大小问题

    Vue3中如何使用rem来控制字体大小问题

    这篇文章主要介绍了Vue3中如何使用rem来控制字体大小问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 整理项目中vue.config.js打包优化配置方法

    整理项目中vue.config.js打包优化配置方法

    这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小,本文结合实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue自定义Form组件实现方法介绍

    Vue自定义Form组件实现方法介绍

    这篇文章主要介绍了Vue自定义Form组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • 图文详解keep-alive如何清除缓存

    图文详解keep-alive如何清除缓存

    vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论