element-ui表格中嵌套表头不同的表格

html 复制代码
<el-table v-loading="loading" :data="ReportList" style="width: 100%" @expand-change="expandChange" >
   <el-table-column type="expand">
     <template slot-scope="scope">
       <el-form label-position="left" inline class="demo-table-expand">
         <el-table :data="scope.row.detailList" border stripe style="width: 100%">
           <el-table-column type="index" />
           <el-table-column prop="batchId" label="生产批次" />
           <el-table-column prop="def1" label="计划单号" />
           <el-table-column prop="startTime" label="开始时间" />
           <el-table-column prop="endTime" label="结束时间" />
           <el-table-column prop="materialId" label="产品编码" />
           <el-table-column prop="materialName" label="产品名称" />
           <el-table-column prop="ncOrderCode" label="NC生产订单号" />
           <el-table-column width="80" prop="unitId" label="主单位" />
           <el-table-column width="180" label="完工数量">
             <template slot-scope="scopes">
               <el-input placeholder="请输入内容" :readonly="!scopes.row.change" v-model="scopes.row.wrastNum">
                 <template slot="append" v-if="scopes.row.change">
                   <el-button type="primary" plain @click="submitChangeNum(scope.row,scopes.row)">确认</el-button>
                 </template>
               </el-input>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
             <template slot-scope="scope">
               <el-button
                 v-if="!scope.row.status"
                 size="mini"
                 type="text"
                 @click="handleChangeReport(scope.row)"
               >修改
               </el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form>
     </template>
   </el-table-column>
   <el-table-column label="生产报告单号" width="180" align="center" key="billCode" prop="billCode"/>
   <el-table-column label="生产部门" align="center" key="deptId" prop="deptId">
     <template slot-scope="scope">
       <dict-tag :options="dict.type.nc_org_dept" :value="scope.row.status"/>
     </template>
   </el-table-column>
   <el-table-column label="报产日期" align="center" key="billDate" prop="billDate"/>

   <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
     <template slot-scope="scope">
       <el-button
         size="mini"
         type="text"
         @click="handleQualityTest(scope.row)"
       >质检报告
       </el-button>
     </template>
   </el-table-column>
 </el-table>
js 复制代码
<script>
	export default {
		data(){
			return {
				ReportList:[
				 {
				   "createBy": "王翠翠",
				    "createTime": "2024-08-05 16:58:32",
				    "updateBy": "",
				    "updateTime": null,
				    "remark": null,
				    "id": 1,
				    "billCode": "55A42022061600031000",
				    "deptId": "二车间",
				    "billDate": "2022-06-16",
				    "ncId": "1001E41000000032WS4C",
				    "orderId": 31,
				    "detailList": [
				       {
				           "createBy": "SYSTEM",
				           "createTime": "2024-08-05 16:58:32",
				           "updateBy": "管理员",
				           "updateTime": "2024-08-07 14:04:12",
				           "remark": null,
				           "id": 1,
				           "reportId": 1,
				           "ncDetailId": "1001E41000000032WS4E",
				           "materialId": "1001E4100000002W1HZL",
				           "materialName": "碳管1 ZT-JY-01.00.001",
				           "unitId": "个",
				           "batchId": "2022061300098344",
				           "wrastNum": 40,
				           "startTime": "2022-06-16 00:00:00",
				           "endTime": "2022-06-16 23:59:59",
				           "def1": "Z221006",
				           "ncOrderCode": null,
				           "ncOrderItemId": "1001E4100000003A1107",
				           "orderItemId": 15,
				           "browNum": "70"
				       },
				       {
				           "createBy": "SYSTEM",
				           "createTime": "2024-08-05 16:58:32",
				           "updateBy": "管理员",
				           "updateTime": "2024-08-07 14:06:12",
				           "remark": null,
				           "id": 2,
				           "reportId": 1,
				           "ncDetailId": "1001E41000000032WS4F",
				           "materialId": "1001E4100000002W1I0C",
				           "materialName": "碳管2 ZT-JY-01.00.002",
				           "unitId": "个",
				           "batchId": "2022061300098339",
				           "wrastNum": 20,
				           "startTime": "2022-06-16 00:00:00",
				           "endTime": "2022-06-16 23:59:59",
				           "def1": "Z221006",
				           "ncOrderCode": null,
				           "ncOrderItemId": "1001E4100000003A10PK",
				           "orderItemId": 16,
				           "browNum": "80"
				       },
				       {
				           "createBy": "SYSTEM",
				           "createTime": "2024-08-05 16:58:32",
				           "updateBy": "",
				           "updateTime": null,
				           "remark": null,
				           "id": 3,
				           "reportId": 1,
				           "ncDetailId": "1001E41000000032WS4G",
				           "materialId": "1001E4100000002W1I1D",
				           "materialName": "碳管3 ZT-JY-01.00.003",
				           "unitId": "个",
				           "batchId": "2022061300098346",
				           "wrastNum": 20,
				           "startTime": "2022-06-16 00:00:00",
				           "endTime": "2022-06-16 23:59:59",
				           "def1": "Z221006",
				           "ncOrderCode": null,
				           "ncOrderItemId": "1001E4100000003A113B",
				           "orderItemId": 14,
				           "browNum": "90"
				       }
				    ]
				  }
				]
			}
		}
	}
</script>
相关推荐
trsoliu1 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
三体世界2 分钟前
Qt从入门到放弃学习之路(1)
开发语言·c++·git·qt·学习·前端框架·编辑器
悟能不能悟9 分钟前
jdk25结构化并发和虚拟线程如何配合使用?有什么最佳实践?
java·开发语言
鹏多多12 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
柠檬071119 分钟前
MATLAB相机标定入门:Camera Calibration工具包详解
开发语言·数码相机·matlab
fruge19 分钟前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评28 分钟前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
熙客33 分钟前
Java8:Lambda表达式
java·开发语言
小咕聊编程37 分钟前
【含文档+PPT+源码】基于java web的篮球馆管理系统系统的设计与实现
java·开发语言
Dragon Wu42 分钟前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro