vue3 表格折叠状态下的 动态合并单元格 附（效果图）

国企项目（数据需保密）

废话少说 直接上代码

 <el-table
          height="calc(100vh - 220px)"
          :data="tableData"
          style="width: 100%"
          align="center"
          border
          row-key="orgId"
          :span-method="objectSpanMethod"
          :default-expand-all="true"
          :row-style="rowstyle"
          @expand-change="handleCollapse"
          show-overflow-tooltip
        >
          <el-table-column prop="orgName" label="项目" width="340" align="left" />
          <el-table-column prop="realPower" label="实际发电量" align="center" />
          <el-table-column prop="totalPower" label="中长期持仓电量" align="center" />
          <el-table-column prop="proportion" label="持仓占比" align="center" />
          <el-table-column
            prop="status"
            label="占比状态"
            align="center"
            :filters="[
              { text: '正常', value: '正常' },
              { text: '异常', value: '异常' },
            ]"
            :filter-method="filterHandler"
          >
            <template #default="scope">
              <span>
                <el-tag
                  v-if="scope.row.status"
                  class="ml-2"
                  :type="scope.row.status === '正常' ? null : 'danger'"
                  >{{ scope.row.status }}</el-tag
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="childProportion" label="子公司持仓占比" align="center" />
          <el-table-column
            prop="childStatus"
            label="子公司占比状态"
            align="center"
            :filters="[
              { text: '正常', value: '正常' },
              { text: '异常', value: '异常' },
            ]"
            :filter-method="filterTag"
          >
            <template #default="scope">
              <span>
                <el-tag
                  class="ml-2"
                  v-if="scope.row.childStatus"
                  :type="scope.row.childStatus === '正常' ? null : 'danger'"
                  >{{ scope.row.childStatus }}</el-tag
                ></span
              >
            </template>
          </el-table-column>
        </el-table>

js部分

const collapseds = ref([]);
  function handleCollapse(row, expandedRows, expanded) {
    if (!expandedRows) {
      collapseds.value.push(row.orgId); // 折叠该行
      updateChildrenCollapseState(row.children, false); // 折叠子行
    } else {
      const index = collapseds.value.indexOf(row.orgId);
      if (index !== -1) {
        collapseds.value.splice(index, 1); // 展开该行
        updateChildrenCollapseState(row.children, true); // 展开子行
      }
    }
  }

  function updateChildrenCollapseState(children, expandedRows) {
    if (children && children.length > 0) {
      for (let i = 0; i < children.length; i++) {
        const child = children[i];
        const index = collapseds.value.indexOf(child.orgId);
        if (index !== -1) {
          collapseds.value.splice(index, 1); // 更新子行的折叠状态
        }
        if (!expandedRows) {
          collapseds.value.push(child.orgId); // 折叠子行
        }
        updateChildrenCollapseState(child.children, expandedRows); // 递归更新子行的子行
      }
    }
  }
   const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (column.property === 'childProportion' || column.property === 'childStatus') {
      if (row?.children && !row?.children[0]?.children) {
        const childCount = row.children.length;
        if (childCount && collapseds.value.includes(row.orgId)) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: childCount + 1,
            colspan: 1,
          };
        }
      }else if(!row.children) {       //这段代码很关键  如果不写 数据会错位
      return {
        rowspan: 0,
        colspan: 0,
      };
    }

    
    }
  };

  const rowstyle = ({ row }) => {
    if (row.children && row.orgName.includes('区域')) {
      return 'background-image: linear-gradient(to right, #ccc, #eee)';
    }
  };