elementui ＜el-table＞单元格合并

最新推荐文章于 2024-10-30 14:25:46 发布

口渴的鱼儿

最新推荐文章于 2024-10-30 14:25:46 发布

阅读量559

点赞数 9

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44279339/article/details/135828892

版权

文章介绍了如何在ElementUI中自定义封装单元格，包括定义合并列的规则、合并逻辑函数以及合并方法，展示了如何根据特定条件实现单元格的合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：elementui 原生单元格样例复杂，所以自己封装实现

效果如下：

代码如下：

定义合并列规则

spanRule: {
          1: ['sourceId', 'prod', 'countries'],
        },

合并逻辑

  function filterArray(item) {
    const valueArray = this.rule.filter((prop) => {
      return item[prop] === this.data[prop];
    });
    if (valueArray.length === this.rule.length) {
      return true;
    } else {
      return false;
    }
  }

合并方法

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (Object.keys(this.spanRule).includes(columnIndex.toString())) {
          // filter验证数组
          const currentTable = {
            rule: this.spanRule[columnIndex],
            data: this.list[rowIndex],
          }; // 该单元格是否被合并 true 合并， false : 不合并
          let chooseSpan = false;
          if (rowIndex !== 0) {
            chooseSpan = filterArray.call(currentTable, this.list[rowIndex - 1]);
          }
          if (chooseSpan) {
            return { rowspan: 0, colspan: 1 };
          } else {
            return {
              rowspan: this.list.filter(filterArray, currentTable).length,
              colspan: 1,
            };
          }
        }
        return { rowspan: 1, colspan: 1 };
      },