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>