el-table 表格嵌套表格

@AfeiyuO2025-10-26 7:02

效果图：

下面是模拟数据与代码

html 复制代码 
      <el-table :data="datas" class="w-full h-full" row-key="id">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <!-- 嵌套表格 -->
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="nested-table-container">
              <el-table
                :data="row.keyTacklingDTOList"
                class="nested-table"
                border
              >
                <el-table-column
                  label="序号"
                  prop="xh"
                  width="80"
                  align="center"
                />
                <el-table-column
                  label="重点任务"
                  prop="zdrw"
                  min-width="200"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="预期挖潜数(亿元)"
                  prop="yqwqs"
                  width="120"
                  align="center"
                />
                <el-table-column
                  label="已挖潜数(亿元)"
                  prop="ywqs"
                  width="120"
                  align="center"
                />
                <el-table-column
                  label="缺口(亿元)"
                  prop="qk"
                  width="100"
                  align="center"
                />
                <el-table-column
                  label="分管区领导/挂点区领导"
                  prop="fgqld"
                  width="150"
                />
                <el-table-column label="牵头单位" prop="qtdw" width="120" />
                <el-table-column label="配合单位" prop="phdw" width="120" />
                <el-table-column label="填报部门" prop="tjbm" width="120" />
                <el-table-column
                  label="完成时间节点"
                  prop="wcsjjd"
                  width="120"
                />
                <el-table-column
                  label="负责人"
                  prop="bmfzr"
                  min-width="150"
                />
                <el-table-column
                  label="操作"
                  fixed="right"
                  width="250"
                  align="center"
                >
                  <template #default="{ row }">
                    <el-button type="primary" link> 更新检测 </el-button>
                    <el-button type="primary" link> 爬取 </el-button>
                    <el-button type="primary" link> 修改 </el-button>
                    <el-button type="primary" link> 清单 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="年份" prop="nf" min-width="100" />
        <el-table-column label="季度" prop="yf_decode" min-width="100" />
        <el-table-column
          label="攻坚事项总结"
          prop="gjsxzj"
          min-width="250"
          show-overflow-tooltip
        />
        <el-table-column label="行业" prop="hy_decode" min-width="120" />
        <el-table-column label="更新时间" prop="updateTime" min-width="150" />
        <el-table-column label="操作" fixed="right" width="150" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="edit(row)"> 修改 </el-button>
            <el-button
              type="primary"
              :loading="btnLoading"
              link
              @click="del(row)"
            >
              删除
            </el-button>
            <el-button
              type="primary"
              :loading="btnLoading"
              link
              @click="seeList(row)"
            >
              清单
            </el-button>
          </template>
        </el-table-column>
      </el-table>

数据

javascript 复制代码 
[
  {
    id: "852215914584739840",
    xh: "1",
    nf: "2025",
    yf: "1-3月",
    yf_decode: "1-3月",
    gjsxzj:
      "（一）工业（行业主管部门：统计局）一季度预期目标56.73亿元，同比增长0.2%；存在缺口50.25亿元、预期挖潜可覆盖相关缺口",
    hy: "工业",
    hy_decode: "工业",
    updateTime: "2025-05-26 00:00:00",
    lastModifyUserName: "系统管理员",
    keyTacklingDTOList: [
      {
        id: "852215914672820224",
        xh: "1",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "全力收窄汽车制造业降幅，在现有预测基础上多做贡献。稳定XXXX生产预期，协调XXX将一季度增加排产，弥补价格下跌造成的XXX。",
        yqwqs: "22",
        ywqs: "10",
        qk: "10",
        fgqld: "张三",
        qtdw: "统计局",
        phdw: "统计局",
        wcsjjd: "3月31日前",
        tjbm: "统计局",
        tjqjxybjh:
          "1、计划计划计划计划计划计划计划计划计划计划计划计划计划计划\r\n2、计划计划计划计划计划计划计划计划计划计划计划计划计划计划",
        gztjzxqldxtdwt:
          "1、问题问题问题问题问题问题问题问题问题问题问题问题问题\r\n2、问题问题问题问题问题问题问题问题问题问题问题问题问题",
        bmfzr: "张三/13800138000",
        bz: "备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注",
        hy: "工业",
        hy_decode: "工业",
        updateTime: "2025-05-26 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "001.000.000.000",
      },
      {
        id: "852215914672820225",
        xh: "1.1",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "加强与重点减产大户xxxx沟通对接，助力企业促销售去库存，力争xxx一季度持平。",
        yqwqs: "22",
        ywqs: "10",
        qk: "10",
        fgqld: "张三",
        qtdw: "统计局",
        phdw: "统计局",
        wcsjjd: "3月31日前",
        tjbm: "统计局",
        tjqjxybjh:
          "1、计划计划计划计划计划计划计划计划计划计划计划计划计划计划\r\n2、计划计划计划计划计划计划计划计划计划计划计划计划计划计划",
        gztjzxqldxtdwt:
          "1、问题问题问题问题问题问题问题问题问题问题问题问题问题\r\n2、问题问题问题问题问题问题问题问题问题问题问题问题问题",
        bmfzr: "张三/13800138000",
        bz: "备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注",
        hy: "工业",
        hy_decode: "工业",
        updateTime: "2025-05-26 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "001.001.000.000",
      },
    ],
  },
  {
    id: "852215914681208832",
    xh: "2",
    nf: "2025",
    yf: "1-3月",
    yf_decode: "1-3月",
    gjsxzj:
      "（二）规下工业（行业主管部门：统计局）一季度预期目标0.1亿元、同比增长5%，存在缺口0.0112亿元",
    hy: "规下工业",
    hy_decode: "规下工业",
    updateTime: "2025-03-09 00:00:00",
    lastModifyUserName: "系统管理员",
    keyTacklingDTOList: [
      {
        id: "852215914693791744",
        xh: "2",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "监测分析全区重点规下工业经济运行情况，统筹各镇街开展全年重点规下工业企业帮扶工作部署，帮助企业稳订单、保增长。",
        yqwqs: "22",
        ywqs: "10",
        qk: "10",
        fgqld: "张三",
        qtdw: "统计局",
        phdw: "统计局",
        wcsjjd: "3月31日前",
        tjbm: "统计局",
        tjqjxybjh:
          "1、计划计划计划计划计划计划计划计划计划计划计划计划计划计划\r\n2、计划计划计划计划计划计划计划计划计划计划计划计划计划计划",
        gztjzxqldxtdwt:
          "1、问题问题问题问题问题问题问题问题问题问题问题问题问题\r\n2、问题问题问题问题问题问题问题问题问题问题问题问题问题",
        bmfzr: "张三/13800138000",
        bz: "备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注",
        hy: "规下工业",
        hy_decode: "规下工业",
        updateTime: "2025-03-09 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "002.000.000.000",
      },
    ],
  },
  {
    id: "852215914697986048",
    xh: "3",
    nf: "2025",
    yf: "1-3月",
    yf_decode: "1-3月",
    gjsxzj:
      "（三）农业（行业主管部门：农业农村局）一季度预期目标10亿元，同比增长0.2%；存在缺口0.5亿元、预期挖潜可覆盖相关缺口",
    hy: "农业",
    hy_decode: "农业",
    updateTime: "2025-03-10 00:00:00",
    lastModifyUserName: "系统管理员",
    keyTacklingDTOList: [
      {
        id: "852215914706374656",
        xh: "3",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "结合春节、情人节等节日节庆，引导区内盆栽、花卉、观赏鱼等企业进行联合促销活动并加大排产。",
        yqwqs: "22",
        ywqs: "5",
        qk: "10",
        fgqld: "张三",
        qtdw: "农村农业局",
        phdw: "统计局",
        wcsjjd: "3月31日前",
        tjbm: "农村农业局",
        tjqjxybjh:
          "1、计划计划计划计划计划计划计划计划计划计划计划计划计划计划\r\n2、计划计划计划计划计划计划计划计划计划计划计划计划计划计划",
        gztjzxqldxtdwt:
          "1、问题问题问题问题问题问题问题问题问题问题问题问题问题\r\n2、问题问题问题问题问题问题问题问题问题问题问题问题问题",
        bmfzr: "张三/13800138000",
        bz: "备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注",
        hy: "农业",
        hy_decode: "农业",
        updateTime: "2025-03-10 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "003.000.000.000",
      },
    ],
  },
  {
    id: "852217578704211968",
    xh: "4",
    nf: "2025",
    yf: "1-3月",
    yf_decode: "1-3月",
    gjsxzj:
      "（四）批发零售业（行业主管部门：商务局）一季度预期目标xxx亿元，同比增长5%；存在缺口xx亿元、预期挖潜可覆盖相关缺口",
    hy: "批发零售业",
    hy_decode: "批发零售业",
    updateTime: "2025-03-11 00:00:00",
    lastModifyUserName: "系统管理员",
    keyTacklingDTOList: [
      {
        id: "852876656086487040",
        xh: "3.3.10",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "测试测试",
        yqwqs: "10",
        ywqs: "10",
        qk: "0",
        fgqld: "张三",
        qtdw: "万顷沙镇",
        phdw: "万顷沙镇",
        wcsjjd: "3月31日前",
        tjbm: "万顷沙镇",
        tjqjxybjh: "测试测试测试测试",
        gztjzxqldxtdwt: "测试测试测试测试测试测试",
        bmfzr: "张三/1308001380000，李四/138001380000",
        bz: "测试测试测试测试测试测试测试测试",
        hy: "住宿餐饮业",
        hy_decode: "住宿餐饮业",
        updateTime: "2025-03-11 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "003.003.010.000",
      },
      {
        id: "852218887142510592",
        xh: "4",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "xxxx、xxxx等重点企业，增量xx亿元；",
        yqwqs: "10",
        ywqs: "5",
        qk: "5",
        fgqld: "张三",
        qtdw: "区统计局",
        phdw: "区统计局",
        wcsjjd: "3月31日前",
        tjbm: "区统计局",
        tjqjxybjh:
          "1.涉及我镇重点企业增量任务的xx家，其中正向拉动的企业xxx家，分别是xxx、xxx、xxx、xxx、xxx。正向拉动xxx家企业预计一季度营业收入xxx亿元，同比增长xxx%；其中xxx预计一季度销售额xxx亿元，净增量xxx亿元，xxx预计一季度销售额xxx亿元，净增量xxx亿元，xxx预计一季度销售额xxx元，净增量xxx亿元，xxx预计一季度销售额xxx亿元，闪电鸟预计一季度销售额xxx亿元，净增量xxx亿元。xxx一季度预计营业收入xxx亿元，同比上升xxx%。\r\n2.2月17日，xxx主持召开了xxx、xxx的政企座谈会，了解企业一季度生产经营情况。\r\n3.下一步工作计划：加大企业走访挖潜力度，推动正向拉动企业多做贡献。",
        gztjzxqldxtdwt:
          "1.涉及我镇重点企业增量任务的xx家，其中正向拉动的企业xxx家，分别是xxx、xxx、xxx、xxx、xxx。正向拉动xxx家企业预计一季度营业收入xxx亿元，同比增长xxx%；其中xxx预计一季度销售额xxx亿元，净增量xxx亿元，xxx预计一季度销售额xxx亿元，净增量xxx亿元，xxx预计一季度销售额xxx元，净增量xxx亿元，xxx预计一季度销售额xxx亿元，闪电鸟预计一季度销售额xxx亿元，净增量xxx亿元。xxx一季度预计营业收入xxx亿元，同比上升xxx%。\r\n",
        bmfzr: "张三/1308001380000，李四/138001380000",
        bz: "1.涉及我镇重点企业增量任务的xx家，其中正向拉动的企业xxx家，分别是xxx、xxx、xxx、xxx、xxx。正向拉动xxx家企业预计一季度营业收入xxx亿元，同比增长xxx%；其中xxx预计一季度销售额xxx亿元，净增量xxx亿元，xxx预计一季度销售额xxx亿元，净增量xxx亿元，xxx预计一季度销售额xxx元，净增量xxx亿元，xxx预计一季度销售额xxx亿元，闪电鸟预计一季度销售额xxx亿元，净增量xxx亿元。xxx一季度预计营业收入xxx亿元，同比上升xxx%。\r\n2.2月17日，xxx主持召开了xxx、xxx的政企座谈会，了解企业一季度生产经营情况。\r\n",
        hy: "批发零售业",
        hy_decode: "批发零售业",
        updateTime: "2025-03-11 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "004.000.000.000",
      },
      {
        id: "852877055421976576",
        xh: "10.10.10.10",
        nf: "2025",
        yf: "1-3月",
        yf_decode: "1-3月",
        zdrw: "测试测试测试测试测试测试测试测试",
        yqwqs: "10",
        ywqs: "10",
        qk: "0",
        fgqld: "张三",
        qtdw: "明珠湾管理局",
        phdw: "明珠湾管理局",
        wcsjjd: "3月31日前",
        tjbm: "明珠湾管理局",
        tjqjxybjh: "测试测试测试测试测试测试测试测试",
        gztjzxqldxtdwt: "测试测试测试测试测试测试测试测试",
        bmfzr: "张三/1308001380000，李四/138001380000",
        bz: "测试测试测试测试测试测试测试测试",
        hy: "农业",
        hy_decode: "农业",
        updateTime: "2025-03-11 00:00:00",
        lastModifyUserName: "系统管理员",
        xhStr: "010.010.010.010",
      },
    ],
  },
]
相关推荐
ZC跨境爬虫4 小时前
跟着 MDN 学CSS day_16：（深入掌握背景与边框的艺术）
前端·css·ui·html·tensorflow
道里6 小时前
花了 5 万刀用 AI 写代码之后，这是我的全部经验
前端·人工智能
Royzst7 小时前
xml知识点
java·服务器·前端
IT_陈寒7 小时前
React useEffect闭包陷阱差点把我整失业了
前端·人工智能·后端
kyriewen8 小时前
推行AI写代码一年后，Code Review变成了新的加班理由
前端·ai编程·cursor
前端环境观察室8 小时前
给 Agent Browser Workflow 加一层可观测性：Trace、Snapshot 和 Review Queue
前端
柒瑞8 小时前
Superpowers结合Claude code浅实战
前端
Nian.Baikal9 小时前
从零搭建离线地图服务：Nginx + Cesium/Leaflet 实战指南
运维·前端·nginx
前端毕业班9 小时前
uniapp web 灵活控制 style scoped
前端·javascript·vue.js
lichenyang4539 小时前
鸿蒙业务需求实战：AI 问题走马灯卡片实现复盘
前端
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04【AI】2026 年具身智能模型和世界模型总结05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07Codegraph 实战：用知识图谱让 AI 编程效率翻倍08Codex使用DeepSeek API的方法（cc switch + codex bridge方案）09CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）10给 Claude Code 装上“技能库”和“眼睛”：配置 Skills 与图片识别实战