ElementUI table表格动态合并

最近在做一个大型的港口项目,需要使用到 elementUI table 组件的方法 :span-method=“objectSpanMethod” 进行单元格的动态合并。查看了官方 API 后,发现简单、直白、明了,无法满足下图业务的需求。所以参考了一些其他的网络资料,具体的思路:在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=a1384887faf34dd08cacd8ebe4a4c0bd.pngElementUI table表格动态合并

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

    data() {
        return {
          // 合并单元格需要的数据
          spanArr: [], //遍历数据时,根据相同的标识去存储记录
          pos: 0, // 二维数组的索引
        };
      },
    
  2. 然后在 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;
          }
        },
     },
    
    
  3. 最后在 created 或 mounted 中调用处理函数将异步获取到的数据传递过去进行处理:

    mounted() {
    	this.tableData = …. //异步获取数据
    	this.getSpanArr(this.tableData);
    },
    
上一篇:Linux:DNS域名系统概述及正向解析实验


下一篇:[atAGC055F]Creative Splitting