vue中elementUI table组件合并单元格教程

最新推荐文章于 2024-08-13 23:10:15 发布

夏天Lola(付善兰)

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量6.2k

点赞数 5

分类专栏： vue elementUI

本文链接：https://blog.csdn.net/weixin_40552099/article/details/105583849

版权

本文详细介绍了如何在Vue项目中使用ElementUI的Table组件进行单元格的合并，包括合并的思路和具体实现步骤，以及关键的`span-method`方法的使用。

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

vue中elementUI table组件合并单元格教程

一、先看看我这边合并后的效果图
在这里插入图片描述
二、合并思路或原理大致讲解
1.首先要去遍历表格数组，计算出每行需要合并的数量（遍历数组去记录合并规则）
2.通过给table传入span-method方法可以实现合并行或列
（方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。文档地址：https://element.eleme.cn/#/zh-CN/component/table）
三、案列代码
1.表格新增span-method=“objectSpanMethod”

  <el-table :data="tableData"  :span-method="objectSpanMethod"   border  >
  </el-table>

2.JS部分

    //遍历数组去记录合并规则
        getSpanArr(data) {
            let that = this
                //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
            t