vue3 el-table表头折叠展开，渲染嵌套数据

太空游走的鱼

1298人浏览 · 2025-09-18 15:25:40

太空游走的鱼 · 2025-09-18 15:25:40 发布

由于表头过多影响体验感，如何实现表格折叠呢？

因为el-table并没有提供表头收缩扩展的功能，可直接用v-if或者v-show去动态的加载表头。

1.自定义需要折叠展开表头名称

<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
width="210"
>
<template #header>
<div @click="toggleMonthColumns" class="shouzhi align-content fs16">
<div>1月-12月订货与报单汇总</div>
<el-icon size="20" color="#409eff" v-if="state.showMonthColumns"
><DArrowLeft
/></el-icon>
<el-icon size="20" color="#409eff" v-else><DArrowRight /></el-icon>
</div>
</template>

</el-table-column>

2. 展开需要显示的表头通过showMonthColumns状态是否示

<template v-if="state.showMonthColumns">
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH1"
label="1月订货"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="BD1"
label="1月报单"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH2"
label="2月订货"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="BD2"
label="2月报单"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH3"
label="3月订货"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="BD3"
label="3月报单"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH4"
label="4月订货"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="BD4"
label="4月报单"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH5"
label="5月订货"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="BD5"
label="5月报单"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH6"
label="6月订货"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="BD6"
label="6月报单"
min-width="90"
sortable
></el-table-column>
<el-table-column
show-overflow-tooltip
headerAlign="center"
align="center"
prop="DH7"
label="7月订货"
min-width="90"
sortable
></el-table-column>
</template>

核心代码：

//根据状态显示是否折叠展开

const toggleMonthColumns = () => {
state.showMonthColumns = !state.showMonthColumns;
forceTableRerender();
};

//表格重新渲染，避免表格格式恢复无效

const forceTableRerender = () => {

state.tableKey += 1;

};

效果图：

完整代码：

<template>
  <el-table
    :data="state.list"
    :key="state.tableKey"
    border
    stripe
    row-key="Lv"
    default-expand-all
    :header-cell-style="headerCellStyle"
  >
    <el-table-column label="序号" type="index" width="55" align="center" />
    <el-table-column
      show-overflow-tooltip
      headerAlign="center"
      align="center"
      prop="Lv"
      min-width="90"
      label="层次"
    >
    </el-table-column>
    <el-table-column prop="date" label="Date" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="address" label="Address" />

    <!-- 月份汇总列（折叠状态显示） -->
    <el-table-column
      show-overflow-tooltip
      headerAlign="center"
      align="center"
      width="210"
      :cell-style="tableRowClassName"
    >
      <template #header>
        <div @click="toggleMonthColumns" class="shouzhi align-content fs16">
          <div>1月-12月订货与报单汇总</div>
          <el-icon size="20" color="#409eff" v-if="state.showMonthColumns"
            ><DArrowLeft
          /></el-icon>
          <el-icon size="20" color="#409eff" v-else><DArrowRight /></el-icon>
        </div>
      </template>
      <template #default="scope">
        <el-tooltip placement="top">
          <template #content>
            <div>
              1月订货: {{ scope.row.DH1 || 0 }} —— 1月报单:
              {{ scope.row.BD1 || 0 }}
            </div>
            <div>
              2月订货: {{ scope.row.DH2 || 0 }} —— 2月报单:
              {{ scope.row.BD2 || 0 }}
            </div>
            <div>
              3月订货: {{ scope.row.DH3 || 0 }} —— 3月报单:
              {{ scope.row.BD3 || 0 }}
            </div>
            <div>
              4月订货: {{ scope.row.DH4 || 0 }} —— 4月报单:
              {{ scope.row.BD4 || 0 }}
            </div>
            <div>
              5月订货: {{ scope.row.DH5 || 0 }} —— 5月报单:
              {{ scope.row.BD5 || 0 }}
            </div>
            <div>
              6月订货: {{ scope.row.DH6 || 0 }} —— 6月报单:
              {{ scope.row.BD6 || 0 }}
            </div>
          </template>
          <el-text type="primary"> 查看详情 </el-text>
        </el-tooltip>
      </template>
    </el-table-column>

    <!-- 月份详细列（展开状态显示） -->
    <template v-if="state.showMonthColumns">
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="DH1"
        label="1月订货"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="BD1"
        label="1月报单"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="DH2"
        label="2月订货"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="BD2"
        label="2月报单"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="DH3"
        label="3月订货"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="BD3"
        label="3月报单"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="DH4"
        label="4月订货"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="BD4"
        label="4月报单"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="DH5"
        label="5月订货"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="BD5"
        label="5月报单"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="DH6"
        label="6月订货"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        headerAlign="center"
        align="center"
        prop="BD6"
        label="6月报单"
        min-width="90"
        sortable
      ></el-table-column>
    </template>

    <el-table-column
      show-overflow-tooltip
      headerAlign="center"
      align="center"
      prop="CDType"
      label="参加方式"
      min-width="90"
    ></el-table-column>

    <el-table-column
      show-overflow-tooltip
      headerAlign="center"
      align="center"
      prop="FCName"
      width="90"
    >
      <template #header>
        <div @click="toggleFCNameColumns" class="shouzhi align-content fs16">
          <div>扶持人</div>
          <el-icon size="20" color="#52c41a" v-if="state.showFCNameColumns"
            ><DArrowLeft
          /></el-icon> 
          <el-icon size="20" color="#52c41a" v-else><DArrowRight /></el-icon>
        </div>
      </template>
      <template v-if="state.showFCNameColumns">
        <el-table-column
          show-overflow-tooltip
          headerAlign="center"
          align="center"
          prop="FCName1"
          label="扶持人1"
          min-width="90"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          headerAlign="center"
          align="center"
          prop="FCName2"
          label="扶持人2"
          min-width="90"
        >
        </el-table-column>
      </template>
    </el-table-column>

    <el-table-column
      show-overflow-tooltip
      headerAlign="center"
      align="center"
      prop="FCUId"
      label="扶持人ID"
      min-width="90"
    ></el-table-column>
    <el-table-column
      show-overflow-tooltip
      headerAlign="center"
      align="center"
      prop="FCProduct"
      label="扶持产品"
      min-width="90"
    ></el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { DArrowRight, DArrowLeft } from "@element-plus/icons-vue";
import { reactive } from "vue";

const state = reactive({
  list: [
    {
      Lv: 0,
      date: "2019-05-01",
      name: "001",
      address: "xxx",
      DH1: "1",
      BD1: "1",
      DH2: "2",
      BD2: "2",
      DH3: "3",
      BD3: "3",
      DH4: "4",
      BD4: "4",
      DH5: "5",
      BD5: "5",
      DH6: "6",
      BD6: "6",
      CDType: "活动",
      children: [
        {
          Lv: 1,
          date: "2020-05-01",
          name: "002",
          address: "xxxx",
        },
        {
          Lv: 2,
          date: "2021-05-01",
          name: "003",
          address: "xxxxxx",
        },
      ],
    },
  ],
  tableKey: 0,
  showMonthColumns: false, // 控制月份列的显示
  showFCNameColumns: false,
});

// 切换月份列的显示
const toggleMonthColumns = () => {
  state.showMonthColumns = !state.showMonthColumns;
  forceTableRerender();
};

const toggleFCNameColumns = () => {
  state.showFCNameColumns = !state.showFCNameColumns;
  forceTableRerender();
};

const forceTableRerender = () => {
  state.tableKey += 1;
};

const headerCellStyle = ({ row, column, rowIndex, columnIndex }: any) => {  
  if (column.property === undefined && columnIndex === 5) { // 第6列（索引5）
    return {
      backgroundColor: '#e6f7ff',
      color: '#1890ff',
      fontWeight: 'bold',
    };
  }
  
  if (column.property === 'FCName' || column.property === 'FCName1' || column.property === 'FCName2') {
    return {
      backgroundColor: '#f6ffed',
      color: '#52c41a',
      fontWeight: 'bold',
    };
  }
  
  // 默认样式
  return {
    backgroundColor: '#fafafa',
    fontWeight: 'bold'
  };
};


</script>
<style>
.shouzhi {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

亚马逊云科技技术品牌专区

更多推荐

WRB1205S-1WR2 与钡特电源 VB1-12S05S 参数规格解析｜ 1W 宽压输入隔离 DC-DC 工业电源模块性能拆解

亚马逊云科技技术品牌专区

AI 前沿日报 | 2026年7月10日

法国竞争管理局正对英伟达推进反垄断调查，核心指控围绕市场对其 CUDA 平台的高度依赖，以及英伟达对 CoreWeave 等 AI 云计算公司的投资。若落地，法国将成全球首个对英伟达提出反垄断指控的监管机构。Reflect 功能向已开记忆功能的用户开放，可回看过去 1-12 个月的 Claude 使用活动，并按"委派、描述、辨别、审慎"四个维度生成使用总结与改进建议。据 IT之家援引的消息，三星正