如图所示
因为项目需求,不确定表格有几个,不确定什么地方需要合并,所以需要自己去手动封装,代码如下
<template><div class="zhengqu_box"><!-- 氨氮 --><div class="table_box" v-for="item in tableInfoList" :key="item.index"><el-row v-if="item.projectReagents.length > 0"><el-col :span="4"> <h3>化验项目</h3> </el-col><el-col :span="20"><h3>{{ item.projectName }}</h3></el-col></el-row><el-form:model="item"class="demo-form-inline"ref="gatherForm"v-if="item.projectReagents.length > 0"><tableborder="1"bordercolor="#c0c4cc"cellspacing="0"cellpadding="8"align="center"><thead><th v-for="val in testTableHead" :key="val.id">{{ val.name }}</th></thead><tbody v-for="(k, index2) in item.projectReagents" :key="index2"><tr v-for="(v, index) in k.raws" :key="index"><th :rowspan="k.raws.length" v-if="index == 0">{{ k.reagentName }}</th><td>{{ v.rawName }}</td><td><el-form-item:prop="'projectReagents.' +index2 +'.raws.' +index +'.everyReagentDosage'":rules="{required: true,message: '不能为空',trigger: 'blur',}"><el-input-numberv-model="v.everyReagentDosage":min="0":controls="false"@blur="changeNumber(k, v, v.everyReagentDosage)"/></el-form-item></td><td :rowspan="k.raws.length" v-if="index == 0"><el-form-item:prop="'projectReagents.' +index2 +'.raws.' +index +'.reagentTotalDosage'":rules="{required: true,message: '不能为空',trigger: 'blur',}"><el-input-numberv-model="v.reagentTotalDosage":min="0":controls="false"/></el-form-item></td><td :rowspan="k.raws.length" v-if="index == 0"><el-form-item:prop="'projectReagents.' +index2 +'.raws.' +index +'.currmonthConfigNumber'":rules="{required: true,message: '不能为空',trigger: 'blur',}"><el-input-numberv-model="v.currmonthConfigNumber":min="0":controls="false"/></el-form-item></td></tr></tbody></table></el-form></div></div></template><script>export default {data() {return {testTableHead: [{ name: "试剂名称", id: 1, prop: "lsx" },{ name: "所需原料", id: 2, prop: "sxyl" },{ name: "每次试剂用量(g)", id: 3, prop: "sjyl", width: "125px" },{ name: "试剂总量", id: 7, prop: "sjzl" },{ name: "当月配置次数", id: 10, prop: "pzch", width: "135px" },],gatherForm: {tableData1: [{currmonthConfigNumber: undefined, // --当月配置次数everyReagentDosage: undefined, // --每次试剂用量（g）reagentTotalDosage: undefined, // --试剂总量},],},rowNumArr: [],tableInfoList: [],num66: 0,};},props: {testFlag: {type: Number,default: () => {},},},created() {if (this.testFlag) {this.getGbFillingReagentHeader();}},methods: {keep() {console.log(this.tableInfoList, 777666);},// 试剂使用数据填报表头async getGbFillingReagentHeader() {try {// 适用范围：（1=镇区 2=农村）const res =await this.$api.reagentCostManegent.getGbFillingReagentHeader({applyRange: this.testFlag,});// this.tableInfoList = res.data || [];this.getTreeItem(res.data);console.log(this.num66, 111);} catch (error) {console.log(error);}},getTreeItem(data) {this.num66 = 0;data.forEach((item) => {item.projectReagents.forEach((projectReagentsItem) => {this.num66 += projectReagentsItem.raws.length;projectReagentsItem.raws.forEach((rawsItem) => {rawsItem.currmonthConfigNumber = undefined;rawsItem.everyReagentDosage = undefined;rawsItem.reagentTotalDosage = undefined;});});});console.log(data, 888999);this.tableInfoList = JSON.parse(JSON.stringify(data));// for (let i = 0; i < this.num66; i++) {// this.gatherForm.tableData1.push({// currmonthConfigNumber: undefined, // --当月配置次数// everyReagentDosage: undefined, // --每次试剂用量（g）// reagentTotalDosage: undefined, // --试剂总量// });// }},changeNumber(k, v, num) {console.log(k, 7777);console.log(v, 888);console.log(num, 999);},},};</script><style lang="less" scoped>.zhengqu_box {text-align: center;.table_box {margin-bottom: 16px;table {width: 100%;}}.el-input-number {width: 100%;/deep/input {// border: 0;}}}</style>
