el-table/avue-curd 相同列内容合并

最新推荐文章于 2024-03-15 08:43:47 发布

祝你今天也快乐

最新推荐文章于 2024-03-15 08:43:47 发布

阅读量511

点赞数 10

分类专栏： avue element vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/killerdoubie/article/details/134977108

版权

vue 同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

avue

20 篇文章 0 订阅

订阅专栏

element

20 篇文章 2 订阅

订阅专栏

1.效果

2.html

3.js

 spanMethod({ row, column, rowIndex }) {
      if (column.property === 'deviceName') {
        if (rowIndex > 0 && row.deviceName === this.data[rowIndex - 1].deviceName) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }

        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.data.length; i++) {
          if (this.data[i].deviceName === row.deviceName) {
            rowspan++;
          } else {
            break;
          }
        }
        return {
          rowspan: rowspan,
          colspan: 1,
        };
      } else if (column.property === 'deviceCode') {
        if (rowIndex > 0 && row.deviceCode === this.data[rowIndex - 1].deviceCode) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }

        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.data.length; i++) {
          if (this.data[i].deviceCode === row.deviceCode) {
            rowspan++;
          } else {
            break;
          }
        }
        return {
          rowspan: rowspan,
          colspan: 1,
        };
      } else if (column.property === 'installSite') {
        if (rowIndex > 0 && row.installSite === this.data[rowIndex - 1].installSite) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }

        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.data.length; i++) {
          if (this.data[i].installSite === row.installSite) {
            rowspan++;
          } else {
            break;
          }
        }
        return {
          rowspan: rowspan,
          colspan: 1,
        };
      }
      // 其他列不进行合并
      return {
        rowspan: 1,
        colspan: 1,
      }
    },