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>
相关推荐
源代码•宸6 分钟前
C++高频知识点(二)
开发语言·c++·经验分享
蓝翔认证10级掘手15 分钟前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
你怎么知道我是队长29 分钟前
python-input内置函数
开发语言·python
前端康师傅39 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang1 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6661 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼1 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
每天开心1 小时前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt1 小时前
真的!真的就一句话就能明白this指向问题
前端·javascript
jyan_敬言2 小时前
【C++】string类(二)相关接口介绍及其使用
android·开发语言·c++·青少年编程·visual studio