el-table 表格嵌套表格
效果图:
下面是模拟数据与代码
<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-columnlabel="序号"prop="xh"width="80"align="center"/><el-table-columnlabel="重点任务"prop="zdrw"min-width="200"show-overflow-tooltip/><el-table-columnlabel="预期挖潜数(亿元)"prop="yqwqs"width="120"align="center"/><el-table-columnlabel="已挖潜数(亿元)"prop="ywqs"width="120"align="center"/><el-table-columnlabel="缺口(亿元)"prop="qk"width="100"align="center"/><el-table-columnlabel="分管区领导/挂点区领导"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-columnlabel="完成时间节点"prop="wcsjjd"width="120"/><el-table-columnlabel="负责人"prop="bmfzr"min-width="150"/><el-table-columnlabel="操作"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-columnlabel="攻坚事项总结"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-buttontype="primary":loading="btnLoading"link@click="del(row)">删除</el-button><el-buttontype="primary":loading="btnLoading"link@click="seeList(row)">清单</el-button></template></el-table-column></el-table>
数据
[{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",},],},
]