解决objectSpanMethod与expand共存时展开后表格错位问题

小只笨笨狗～2026-04-01 16:13

1、增加@expand-change="expandHeight"---手动增加高度

2、单列合并（'department'）

复制代码

 expandHeight(row, expanded) {
      this.$nextTick(() => {
        const rowIndex = this.tableData.findIndex(
          (item) => item.userKey === row.userKey
        );
        if (rowIndex === -1 || !this.spanObj.department) return;

        let realIndex = rowIndex;
        for (let i = rowIndex; i >= 0; i--) {
          if (this.spanObj.department[i] > 0) {
            realIndex = i;
            break;
          }
        }

        const isExpanding = expanded.some(
          (item) => item.userKey === row.userKey
        );

        const newDept = [...this.spanObj.department];
        if (isExpanding) {
          newDept[realIndex] += 1;
        } else {
          newDept[realIndex] -= 1;
        }

        this.spanObj.department = newDept;

        this.$refs.oneRef.doLayout();
      });
    },

3、多列合并（'department' ，'group' ）

复制代码

    expandHeight(row, expanded) {
      this.$nextTick(() => {
        const rowIndex = this.tableData.findIndex(
          (item) => item.userKey === row.userKey
        );
        if (rowIndex === -1 || !this.spanObj.department || !this.spanObj.group)
          return;

        let deptIndex = rowIndex;
        for (let i = rowIndex; i >= 0; i--) {
          if (this.spanObj.department[i] > 0) {
            deptIndex = i;
            break;
          }
        }

        let groupIndex = rowIndex;
        for (let i = rowIndex; i >= 0; i--) {
          if (this.spanObj.group[i] > 0) {
            groupIndex = i;
            break;
          }
        }

        const isExpanding = expanded.some(
          (item) => item.userKey === row.userKey
        );

        const newDept = [...this.spanObj.department];
        const newGroup = [...this.spanObj.group];

        if (isExpanding) {
          newDept[deptIndex] += 1;
          newGroup[groupIndex] += 1;
        } else {
          newDept[deptIndex] -= 1;
          newGroup[groupIndex] -= 1;
        }

        this.spanObj.department = newDept;
        this.spanObj.group = newGroup;

        this.$refs.oneRef.doLayout();
      });
    },

解决思路：展开某行时候手动在合并的列中增加一个高度，其他代码看上一篇