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",
      },
    ],
  },
]
相关推荐
我是华为OD~HR~栗栗呀4 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java5 小时前
vivo响应式官网
前端·css·html·1024程序员节
飞鸟真人9 小时前
VUE+Electron从0开始搭建开发环境
electron·vue
web打印社区10 小时前
使用React如何静默打印页面：完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗10 小时前
[特殊字符] PM2 入门实战：从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长10 小时前
基于Vue的课程达成度分析系统t84pzgwk（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅12 小时前
探码科技再获“专精特新”认定：Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_12 小时前
Chrome开发者工具
前端·chrome
YiHanXii12 小时前
this 输出题
前端·javascript·1024程序员节
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06GitLab 零基础入门指南：从安装到项目管理全流程07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08Labelme从安装到标注：零基础完整指南09KGG转MP3工具|非KGM文件|解密音频10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）