element 表格第一列合并,第二列展开后出现错位情况

展开后发现蓝色一行挤下来,而且还错位了

解决思路:展开行,在dom上其实是新增了一行的高度,合并上新增一个高度就可以

<el-table
  v-loading="tabLoading"
  fit
  ref="oneRef"
  height="100%"
  :span-method="objectSpanMethod"
  @expand-change="expandHeight"
  highlight-current-row
>

async expandHeight(row: any, expanded: any) {
    this.$nextTick(() => {
      this.spanObj = dataMethod(this.data, ['factoryDivText']);
      const A10 = expanded.filter((k: any) => {
        return 'A10' == k.factoryDiv;
      });
      if (A10.length > 0) {
        this.spanObj.factoryDivText[0] = this.spanObj.factoryDivText[0] + A10.length;
      }

      const A20 = expanded.filter((k: any) => {
        return 'A20' == k.factoryDiv;
      });
      if (A20.length > 0) {
        let A20Index = 0;
        this.spanObj.factoryDivText.map((v: any, index: any) => {
          if (A10.length == 0) {
            this.spanObj.factoryDivText[0] = this.spanObj.factoryDivText[0] + A20.length;
          } else {
            if (index != 0 && v != 0) A20Index = index;
          }
        });
        this.spanObj.factoryDivText[A20Index] = this.spanObj.factoryDivText[0] + A20.length;
      }
      (this.$refs.oneRef as any).doLayout();
    });
  }



export const dataMethod = (data: any[], isH: string[]) => {
  const spanObj: any = {};
  const pos: any = {};
  let lastItem: any = null; // 上一个数据项
  data.map((it, i) => {
    Object.keys(it).map(key => {
      if (i === 0) {
        spanObj[key] = [1];
        pos[key] = i;
      } else {
        if (isH.includes(key) && lastItem && isEqual(lastItem, it, isH)) {
          spanObj[key][pos[key]] += 1;
          spanObj[key].push(0);
        } else {
          spanObj[key].push(1);
          pos[key] = i;
        }
      }
    });
    lastItem = it;
  });

  return spanObj;
};


objectSpanMethod({ column, rowIndex }: any) {
    const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1;
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }

获取点击后合并的长度+合并的数字

最终结果展开后正常展示了

最近更新

  1. TCP协议是安全的吗?

    2024-06-12 11:40:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-12 11:40:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-12 11:40:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-12 11:40:02       20 阅读

热门阅读

  1. 服务器硬件基础知识

    2024-06-12 11:40:02       5 阅读
  2. Linux基础命令

    2024-06-12 11:40:02       7 阅读
  3. 大数据知识分享:Python中的变量

    2024-06-12 11:40:02       7 阅读
  4. 力扣981.基于时间的键值存储

    2024-06-12 11:40:02       9 阅读
  5. 【rust 第三方库】serde 序列化反序列化框架

    2024-06-12 11:40:02       8 阅读
  6. 分布式系统

    2024-06-12 11:40:02       4 阅读
  7. Python语言在金融领域的应用探索

    2024-06-12 11:40:02       7 阅读
  8. Thymeleaf 2升级到Tymeleaf 3导致Layout不起作用

    2024-06-12 11:40:02       5 阅读
  9. Android单例的几种实现方式

    2024-06-12 11:40:02       6 阅读
  10. idea自动生成单元测试工具

    2024-06-12 11:40:02       4 阅读
  11. linux中sed命令和awk命令如何使用??????

    2024-06-12 11:40:02       6 阅读
  12. Django里的模板变量

    2024-06-12 11:40:02       3 阅读