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>
相关推荐
PingdiGuo_guo26 分钟前
C++构造和折构函数详解,超详细!
开发语言·c++
Cherry Zack30 分钟前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
来知晓38 分钟前
语音处理:音频移形幻影,为何大振幅信号也无声
开发语言·音视频
啦啦91171439 分钟前
提供一些准备Java八股文面试的建议
java·开发语言·面试
湫兮之风1 小时前
C++:彻底理解左值和右值(从概念到实践,基础版)
开发语言·c++
无敌的牛1 小时前
C++复习(1)
java·开发语言·面试
兮兮能吃能睡1 小时前
R语言术语(2)
开发语言·r语言
颜酱1 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
程序员杰哥2 小时前
UI自动化测试实战:从入门到精通
自动化测试·软件测试·python·selenium·测试工具·ui·职场和发展
木易 士心2 小时前
Nginx 基本使用和高级用法详解
运维·javascript·nginx