ElementUI table表格动态合并

​​Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus_Vue.js视频-51CTO学堂​​

最近在做一个大型的港口项目，需要使用到 elementUItable 组件的方法 :span-method="objectSpanMethod" 进行单元格的动态合并。查看了官方 API 后，发现简单、直白、明了，无法满足下图业务的需求。所以参考了一些其他的网络资料，具体的思路：在动态处理从后端拿回来的数据的时候，是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。

 

首先需要在 data 中定义需要数据，根据数组中存储的标识去合并数据：

 

data() {
    return {
      // 合并单元格需要的数据
      spanArr: [], //遍历数据时，根据相同的标识去存储记录
      pos: 0, // 二维数组的索引
    };
},

 

然后在 methods 中定义方法去处理标识（需要合并的数据单元格）

 

methods: {
    // 列表数据处理函数
    getSpanArr(data) {
      //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的保证遍历的数据是最新的数据。以免造成数据渲染混乱

      this.spanArr = [];
      this.pos = 0;
      //遍历数据
      data.forEach((item, index) => {
        //判断是否是第一项
        if (index === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          //不是第一项时，就根据标识去存储
          if (data[index].sdTarget === data[index - 1].sdTarget) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1);
            this.pos = index;
         }

       }

     });

      console.log(this.spanArr, this.pos);
   },

 
    // 指定合并的单元格函数
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 页面列表上 表格合并行 -> 第几列(从0开始)
      // 需要合并多个单元格时 依次增加判断条件即可
      if (columnIndex === 0) {
        // 二维数组存储的数据 取出
        const _row
= this.spanArr[rowIndex];
        const _col
= _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
       };

        //不可以return {rowspan：0， colspan: 0} 会造成数据不渲染，也可以不写
else，eslint过不了的话就返回false
      } else {
        return false;
     }

   },

 },

 

最后在 created 或 mounted 中调用处理函数将异步获取到的数据传递过去进行处理：

 

mounted() {
this.tableData = …. //异步获取数据
this.getSpanArr(this.tableData);
},