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",
      },
    ],
  },
]
相关推荐
LaoZhangAI19 小时前
Gemini 2.5 Flash Image API尺寸设置完整指南：10种宽高比详解
前端·后端
kangyouwei19 小时前
鸿蒙开发：19-本地开发配置bash环境执行hvigorw命令
前端·harmonyos
Achieve前端实验室19 小时前
JavaScript 原型／原型链
前端·javascript
一碗下酒菜19 小时前
React 闭包陷阱详解
前端
littleplayer19 小时前
ArkTs单元测试 UnitTest 指南
前端
LXA080920 小时前
vue3开发使用框架推荐
前端·javascript·vue.js
拿不拿铁1920 小时前
Vite & Webpack & Rollup 入口与产出配置与示例
前端
用户904438163246020 小时前
React 5 个 “隐形坑”：上线前没注意，debug 到凌晨 3 点
前端·javascript·react.js
StarkCoder20 小时前
打造炫酷浮动式 TabBar：让 iOS 应用导航更有格调！
前端·ios
AAA阿giao20 小时前
Promise：让 JavaScript 异步任务“同步化”的利器
前端·javascript·promise
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05Linux下V2Ray安装配置指南06综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件07jdk21下载、安装（Windows、Linux、macOS）08使用国内镜像网站在线下载安装Qt（解决官网慢的问题）——Qt09MiniMax-M2 全方位配置手册：覆盖 Claude Code, Cursor, Cline 等工具10Labelme从安装到标注：零基础完整指南