el-table 动态合并不定项多级表头的方法

好想吃水果阿阿阿

我们的需求是根据不同的厂配不同的多级表头,每个表头有需要合并的项,并且不确定
如图所示

对表格进行循环操作,此处不赘述,最下方有全部代码

表头是单独写在js方便后期更改,然后引入js文件,然后根据情况去调取

1.     // 获取表头
   
2.     getHeader(nv) {
   
3.       this.factoryCodes = nv;
   
4.       this.headerRow2 = [];
   
5.       // "xx污水处理厂"
   
6.       if (nv == "zgjn-H WS 0101") {
   
7.         //修改表头
   
8.         this.tableHeader = deviceRunReportHead[1];
   
9.         this.headerRow2 = ["紫外线杀菌装置"]; // 需要合并的表头名称数组
   
10.       } else if (nv == "zgjn-H WS 0106") {
    
11.         // xx污水处理厂
    
12.         this.tableHeader = deviceRunReportHead[2];
    
13.         this.headerRow2 = ["紫外线杀菌装置", "除臭系统"]; // 需要合并的表头名称数组
    
14.       } else if (nv == "zgjn-H WS 0105") {
    
15.         //xx污水处理厂
    
16.         this.tableHeader = deviceRunReportHead[3];
    
17.         this.headerRow2 = ["紫外线杀菌装置", "除臭系统"]; // 需要合并的表头名称数组
    
18.       } else {
    
19.         // 其他厂
    
20.         this.tableHeader = deviceRunReportHead[3];
    
21.       }
    
22.       // 刷新表格样式
    
23.       this.$nextTick(() => {
    
24.         this.$refs.slantTable.doLayout();
    
25.         this.getTableDom();
    
26.       });
    
27.       this.keyIndex++;   // 此处是重点,更新完表头之后必须强制刷新表格,否则上一次合并的信息会影响此次合并,keyIndex在el-table的key上,
    
28.     },

复制代码

以下是合并方法

1.     //表头样式设置，将“紫外线杀菌装置”字段设置为行高2（默认是行高1），并将其所占行偏移的部分设置为none
   
2.     headerStyle({ row, column, rowIndex, columnIndex }) {
   
3.       if (this.headerRow2.includes(column.label)) {
   
4.         this.$nextTick(() => {
   
5.           if (document.getElementsByClassName(column.id).length !== 0) {
   
6.             document
   
7.               .getElementsByClassName(column.id)[0]
   
8.               .setAttribute("rowSpan", 2);  // 默认合并两行,因为我这都是最多只需要合并两行
   
9.             return false;
   
10.           }
    
11.         });
    
12.         return column;
    
13.       }
    
14.       if (column.label == undefined) { // 最后一层是没有name的即没有label,则取消合并
    
15.         return { display: "none" };
    
16.       }
    
17.     },

复制代码

下方是全部vue代码

1. <!-- 设备运行记录表 -->
   
2. <template>
   
3.   <div class="deviceRunReport-template">
   
4.     <pageIndexTemp @refresh="refreshTableDom">
   
5.       <!-- 查询框 -->
   
6.       <el-form ref="form" slot="searchBox" :model="form" inline size="small">
   
7.         <el-form-item label="日期" class="date_item">
   
8.           <el-date-picker
   
9.             v-model="form.queryTimeDay"
   
10.             type="date"
    
11.             placeholder="选择日期"
    
12.             value-format="yyyy-MM-dd"
    
13.             :clearable="false"
    
14.             style="width: 160px"
    
15.           >
    
16.           </el-date-picker>
    
17.         </el-form-item>
    
18.         <el-form-item label="城镇污水处理厂">
    
19.           <el-select
    
20.             v-model="form.assetCode"
    
21.             placeholder="请选择城镇污水处理厂"
    
22.           >
    
23.             <el-option
    
24.               v-for="item in townSwagePlantList"
    
25.               :key="item.id"
    
26.               :label="item.aname"
    
27.               :value="item.acode"
    
28.             >
    
29.             </el-option>
    
30.           </el-select>
    
31.         </el-form-item>
    
32.         <el-form-item>
    
33.           <el-button
    
34.             type="primary"
    
35.             icon="el-icon-search"
    
36.             @click="onSearch"
    
37.             size="mini"
    
38.             >筛选</el-button
    
39.           >
    
40.         </el-form-item>
    
41.       </el-form>
    
42.       <!-- 右边按钮 -->
    
43.       <div slot="btnsR">
    
44.         <el-button
    
45.           icon="el-icon-download"
    
46.           @click="onExport(1)"
    
47.           size="mini"
    
48.           type="primary"
    
49.           >按日导出</el-button
    
50.         >
    
51.         <el-button
    
52.           icon="el-icon-download"
    
53.           @click="onExport(2)"
    
54.           v-if="type == 1"
    
55.           size="mini"
    
56.           type="primary"
    
57.           >按月导出</el-button
    
58.         >
    
59.       </div>
    
60.       <!-- 表格 -->
    
61.       <div class="table" slot="tablePage" v-loading="Loading">
    
62.         <div
    
63.           class="slantTableStyle"
    
64.           :style="{
    
65.             '--slantOneColWidth': tableOneColWidth + 'px',
    
66.             '--tableWidth': tableWidth,
    
67.           }"
    
68.         >
    
69.           <el-table
    
70.             :data="tableData"
    
71.             ref="slantTable"
    
72.             :header-cell-style="headerStyle"
    
73.             height="100%"
    
74.             border
    
75.             :key="keyIndex"
    
76.           >
    
77.             <el-table-column
    
78.               v-for="(column1, index) in tableHeader"
    
79.               :key="index"
    
80.               :label="column1.name"
    
81.               :align="column1.align ? column1.align : tableAlignDef"
    
82.               :width="column1.width"
    
83.             >
    
84.               <el-table-column
    
85.                 v-for="(column2, index2) in column1.columns"
    
86.                 :key="index2"
    
87.                 :prop="column2.prop"
    
88.                 :label="column2.name"
    
89.                 :align="column2.align ? column2.align : tableAlignDef"
    
90.                 :width="column2.width ? column2.width : tableMinColumnWidth"
    
91.               >
    
92.                 <el-table-column
    
93.                   v-for="(column3, index3) in column2.columns"
    
94.                   :key="index3"
    
95.                   :prop="column3.prop"
    
96.                   :label="column3.name"
    
97.                   :align="column3.align ? column3.align : tableAlignDef"
    
98.                   :width="tableMinColumnWidth"
    
99.                 >
    
100.                   <template slot-scope="scope">
     
101.                     <!-- 编辑 -->
     
102.                     <div
     
103.                       v-if="
     
104.                         (type == 3 &&
     
105.                           scope.row.isEdit &&
     
106.                           !disabledProp.includes(column3.prop)) ||
     
107.                           (type == 2 &&
     
108.                             scope.row.isEdit &&
     
109.                             scope.row.editProp.includes(column3.prop))
     
110.                       "
     
111.                     >
     
112.                       <el-select
     
113.                         v-model="scope.row[column3.prop]"
     
114.                         placeholder="请选择"
     
115.                         size="mini"
     
116.                         clearable
     
117.                       >
     
118.                         <el-option
     
119.                           v-for="item in options"
     
120.                           :key="item.value"
     
121.                           :label="item.label"
     
122.                           :value="item.value"
     
123.                         >
     
124.                         </el-option>
     
125.                       </el-select>
     
126.                     </div>
     
127.                     <div v-else>
     
128.                       {{
     
129.                         disabledProp.includes(column3.prop)
     
130.                           ? formatTime(scope.row[column3.prop])
     
131.                           : formatStatus(scope.row[column3.prop])
     
132.                       }}
     
133.                     </div>
     
134.                   </template>
     
135.                 </el-table-column>
     
136.                 <template slot-scope="scope">
     
137.                   <!-- 编辑 -->
     
138.                   <div
     
139.                     v-if="
     
140.                       (type == 3 &&
     
141.                         scope.row.isEdit &&
     
142.                         !disabledProp.includes(column2.prop)) ||
     
143.                         (type == 2 &&
     
144.                           scope.row.isEdit &&
     
145.                           scope.row.editProp.includes(column2.prop))
     
146.                     "
     
147.                   >
     
148.                     <el-select
     
149.                       v-model="scope.row[column2.prop]"
     
150.                       placeholder="请选择"
     
151.                       size="mini"
     
152.                       clearable
     
153.                     >
     
154.                       <el-option
     
155.                         v-for="item in options"
     
156.                         :key="item.value"
     
157.                         :label="item.label"
     
158.                         :value="item.value"
     
159.                       >
     
160.                       </el-option>
     
161.                     </el-select>
     
162.                   </div>
     
163.                   <div v-else>
     
164.                     {{
     
165.                       disabledProp.includes(column2.prop)
     
166.                         ? formatTime(scope.row[column2.prop])
     
167.                         : formatStatus(scope.row[column2.prop])
     
168.                     }}
     
169.                   </div>
     
170.                 </template>
     
171.               </el-table-column>
     
172.               <template slot-scope="scope">
     
173.                 <!-- 编辑 -->
     
174.                 <div
     
175.                   v-if="
     
176.                     (type == 3 &&
     
177.                       scope.row.isEdit &&
     
178.                       !disabledProp.includes(column1.prop)) ||
     
179.                       (type == 2 &&
     
180.                         scope.row.isEdit &&
     
181.                         scope.row.editProp.includes(column1.prop))
     
182.                   "
     
183.                 >
     
184.                   <el-select
     
185.                     v-model="scope.row[column1.prop]"
     
186.                     placeholder="请选择"
     
187.                     size="mini"
     
188.                     clearable
     
189.                   >
     
190.                     <el-option
     
191.                       v-for="item in options"
     
192.                       :key="item.value"
     
193.                       :label="item.label"
     
194.                       :value="item.value"
     
195.                     >
     
196.                     </el-option>
     
197.                   </el-select>
     
198.                 </div>
     
199.                 <div v-else>
     
200.                   {{
     
201.                     disabledProp.includes(column1.prop)
     
202.                       ? formatTime(scope.row[column1.prop])
     
203.                       : formatStatus(scope.row[column1.prop])
     
204.                   }}
     
205.                 </div>
     
206.               </template>
     
207.             </el-table-column>
     
208.             <el-table-column
     
209.               fixed="right"
     
210.               label="操作"
     
211.               align="center"
     
212.               width="100"
     
213.               v-if="type !== 1"
     
214.             >
     
215.               <template slot-scope="scope">
     
216.                 <el-button
     
217.                   type="primary"
     
218.                   plain
     
219.                   size="mini"
     
220.                   v-if="
     
221.                     type == 3 && !scope.row.isEdit && compareTime(scope.row)
     
222.                   "
     
223.                   @click="handleClickEdit(scope.$index, scope.row)"
     
224.                   >编辑</el-button
     
225.                 >
     
226.                 <el-button
     
227.                   type="primary"
     
228.                   plain
     
229.                   size="mini"
     
230.                   v-if="
     
231.                     type == 2 &&
     
232.                       ifShowEdit(scope.row) &&
     
233.                       !scope.row.isEdit &&
     
234.                       compareTime(scope.row)
     
235.                   "
     
236.                   @click="handleClickEdit(scope.$index, scope.row)"
     
237.                   >编辑</el-button
     
238.                 >
     
239.                 <el-button
     
240.                   type="primary"
     
241.                   size="mini"
     
242.                   v-if="scope.row.isEdit"
     
243.                   @click="handleClickSaveRow(scope.$index, scope.row)"
     
244.                   >保存</el-button
     
245.                 >
     
246.               </template>
     
247.             </el-table-column>
     
248.             <div slot="append" class="appendTable">
     
249.               填表要求：1、正常运行：√；
     
250.               2、故障：×；3、备用停机：△；4、其他：开机时间或停机时间等情况请填写备注栏
     
251.             </div>
     
252.           </el-table>
     
253.         </div>
     
254.       </div>
     
255.     </pageIndexTemp>
     
256.   </div>
     
257. </template>
     
258. <script>
     
259. import moment from "moment";
     
260. import cloneDeep from "lodash.clonedeep";
     
261. import { downloadXls, downloadZip } from "@/utils/download";
     
262. import pageIndexTemp from "../../../components/pageIndexTemp.vue";
     
263. import { deviceRunReportHead } from "@/utils/deviceRunReportHead.js";
     
264. export default {
     
265.   name: "deviceRunReport",
     
266.   components: { pageIndexTemp },
     
267.   props: {
     
268.     // 说明：
     
269.     // 1 - 不可编辑，仅展示，默认值是1；
     
270.     // 2 - 空白处可编辑，保存后已填入部分不可编辑，单行无空白不出现任何按钮；
     
271.     // 3 - 除部分固定字段外数据可编辑，出现按钮
     
272.     type: {
     
273.       type: Number,
     
274.       default: 1,
     
275.     },
     
276.   },
     
277.   filters: {},
     
278.   data() {
     
279.     return {
     
280.       //查询参数
     
281.       form: {
     
282.         queryTimeDay: moment().format("yyyy-MM-DD"),
     
283.         assetCode: "",
     
284.       },
     
285.       Loading: false,
     
286.       // 城镇污水厂列表
     
287.       townSwagePlantList: [],
     
288.       //表格数据
     
289.       tableData: [],
     
290.       tableOneColWidth: 100,
     
291.       tableMinColumnWidth: 80,
     
292.       tableWidth: "0px",
     
293.       tableAlignDef: "center",
     
294.       tableHeader: [],
     
295.       options: [
     
296.         { label: "√", value: "0" },
     
297.         { label: "△", value: "1" },
     
298.         { label: "×", value: "2" },
     
299.       ],
     
300.       disabledProp: ["time"],
     
301.       queryTime: "",
     
302.       assetCode: "",
     
303.       assetName: "",
     
304.       startForm: {},
     
305.       factoryCodes: "",
     
306.       headerRow2: [],
     
307.       keyIndex: 1,
     
308.     };
     
309.   },
     
310.   mounted() {
     
311.     this.getTableDom();
     
312.   },
     
313.   created() {
     
314.     this.getTownSwagePlantList();
     
315.   },
     
316.   methods: {
     
317.     //查询
     
318.     onSearch() {
     
319.       // this.getHeader(this.form.assetCode);
     
320.       this.getTableData();
     
321.     },
     
322.     // 查询城镇污水厂列表
     
323.     getTownSwagePlantList() {
     
324.       this.$api.reportManagement
     
325.         .getAssetList({ level: 1, cId: 42 })
     
326.         .then((res) => {
     
327.           this.townSwagePlantList = res.data || [];
     
328.           if (this.townSwagePlantList.length > 0) {
     
329.             this.form.assetCode = this.townSwagePlantList[0].acode;
     
330.             this.assetCode = this.form.assetCode;
     
331.             // this.getHeader(this.form.assetCode); // 获取表头
     
332.             this.assetName = this.townSwagePlantList[0].aname;
     
333.             this.getTableData();
     
334.           }
     
335.         });
     
336.     },
     
337.     // 获取表头
     
338.     getHeader(nv) {
     
339.       this.factoryCodes = nv;
     
340.       this.headerRow2 = [];
     
341.       // "xx污水处理厂"
     
342.       if (nv == "zgjn-H WS 0101") {
     
343.         //修改表头
     
344.         this.tableHeader = deviceRunReportHead[1];
     
345.         this.headerRow2 = ["紫外线杀菌装置"]; // 需要合并的表头
     
346.       } else if (nv == "zgjn-H WS 0106") {
     
347.         // xx污水处理厂
     
348.         this.tableHeader = deviceRunReportHead[2];
     
349.         this.headerRow2 = ["紫外线杀菌装置", "除臭系统"]; // 需要合并的表头
     
350.       } else if (nv == "zgjn-H WS 0105") {
     
351.         // xx污水处理厂
     
352.         this.tableHeader = deviceRunReportHead[3];
     
353.         this.headerRow2 = ["紫外线杀菌装置", "除臭系统"]; // 需要合并的表头
     
354.       } else {
     
355.         // 其他厂
     
356.         this.tableHeader = deviceRunReportHead[3];
     
357.       }
     
358.       // 刷新表格样式
     
359.       this.$nextTick(() => {
     
360.         this.$refs.slantTable.doLayout();
     
361.         this.getTableDom();
     
362.       });
     
363.       this.keyIndex++;
     
364.     },
     
365.     //查询表格数据
     
366.     getTableData() {
     
367.       this.Loading = true;
     
368.       this.queryTime = this.form.queryTimeDay;
     
369.       this.assetCode = this.form.assetCode;
     
370.       this.assetName =
     
371.         this.townSwagePlantList.find((item) => item.acode == this.assetCode)
     
372.           .aname || "";
     
373.       this.startForm = JSON.parse(JSON.stringify(this.form));
     
374.       this.$api.reportManagement
     
375.         .getDeviceState(this.form)
     
376.         .then((res) => {
     
377.           if (res.code == 200) {
     
378.             this.tableData = res.data || [];
     
379.             this.getHeader(this.form.assetCode); // 获取表头
     
380.           } else {
     
381.             this.$message.error(res.msg);
     
382.           }
     
383.           this.Loading = false;
     
384.         })
     
385.         .catch(() => {
     
386.           this.Loading = false;
     
387.         });
     
388.     },
     
389.     // 更新table dom
     
390.     refreshTableDom() {
     
391.       this.$nextTick(() => {
     
392.         this.$refs.slantTable.doLayout();
     
393.       });
     
394.     },
     
395.     // 时间转换
     
396.     formatTime(val) {
     
397.       return moment(val).format("HH:mm");
     
398.     },
     
399.     //获取table的DOM元素，筛查出el-table__header的DOM，并获取其宽度，用以控制append部分的宽度设置
     
400.     getTableDom() {
     
401.       let slantTable = this.$refs.slantTable;
     
402.       let tableDom = slantTable.$children.find(
     
403.         (el) => el.$el.className == "el-table__header"
     
404.       );
     
405.       this.tableWidth = tableDom.table.bodyWidth;
     
406.     },
     
407.     //表头样式设置，将“紫外线杀菌装置”字段设置为行高2（默认是行高1），并将其所占行偏移的部分设置为none
     
408.     headerStyle({ row, column, rowIndex, columnIndex }) {
     
409.       if (this.headerRow2.includes(column.label)) {
     
410.         this.$nextTick(() => {
     
411.           if (document.getElementsByClassName(column.id).length !== 0) {
     
412.             document
     
413.               .getElementsByClassName(column.id)[0]
     
414.               .setAttribute("rowSpan", 2);
     
415.             return false;
     
416.           }
     
417.         });
     
418.         return column;
     
419.       }
     
420.       if (column.label == undefined) {
     
421.         return { display: "none" };
     
422.       }
     
423.     },
     
424.     // 点击导出按钮
     
425.     onExport(val) {
     
426.       if (this.form.assetCode == "" || this.form.queryTimeDay == "") {
     
427.         this.$message.warning("请选择日期和污水厂后再进行导出");
     
428.         return;
     
429.       }
     
430.       let flag = JSON.stringify(this.form) == JSON.stringify(this.startForm);
     
431.       // 按日导出重新搜索列表
     
432.       if (val == 1 && !flag) {
     
433.         this.getTableData();
     
434.       }
     
435.       let obj = this.townSwagePlantList.find(
     
436.         (item) => item.acode == this.form.assetCode
     
437.       );
     
438.       let names =
     
439.         val == 1
     
440.           ? this.form.queryTimeDay
     
441.           : moment(this.form.queryTimeDay).format("yyyy-MM") + "月";
     
442.       if (obj) {
     
443.         this.handelDownload(obj, names, val);
     
444.       }
     
445.     },
     
446.     //  下载xls/zip文件
     
447.     handelDownload(obj, names, val) {
     
448.       let fileName = obj.aname + "设备运行记录表" + names + "导出数据";
     
449.       let newName = val == 1 ? ".xls" : ".zip";
     
450.       this.$confirm(
     
451.         `此操作将下载"${fileName}${newName}" 文件, 是否继续?`,
     
452.         "提示",
     
453.         {
     
454.           confirmButtonText: "确定",
     
455.           cancelButtonText: "取消",
     
456.           type: "warning",
     
457.         }
     
458.       )
     
459.         .then(() => {
     
460.           const datas = {
     
461.             type: val,
     
462.             ...this.form,
     
463.           };
     
464.           this.$api.reportManagement.exportDeviceState(datas).then((res) => {
     
465.             val == 1 ? downloadXls(res, fileName) : downloadZip(res, fileName);
     
466.           });
     
467.         })
     
468.         .catch(() => {
     
469.           this.$message({
     
470.             type: "info",
     
471.             message: `已取消下载${names}数据`,
     
472.           });
     
473.         });
     
474.     },
     
475.     // 判断是否显示编辑按钮
     
476.     ifShowEdit(row) {
     
477.       let cloneRow = cloneDeep(row);
     
478.       let arr = [];
     
479.       let keys = Object.keys(cloneRow);
     
480.       for (let i = 0; i < keys.length; i++) {
     
481.         if (!cloneRow[keys[i]]) {
     
482.           arr.push(keys[i]);
     
483.         }
     
484.       }
     
485.       return arr.length > 0 ? true : false;
     
486.     },
     
487.     // 判断当前时间是否会显示编辑按钮
     
488.     compareTime(val) {
     
489.       let current = moment(new Date()).valueOf();
     
490.       let time = moment(val.time).valueOf();
     
491.       return time < current ? true : false;
     
492.     },
     
493.     // 点击编辑按钮
     
494.     handleClickEdit(index, row) {
     
495.       if (
     
496.         this.queryTime !== this.form.queryTimeDay ||
     
497.         this.assetCode !== this.form.assetCode
     
498.       ) {
     
499.         this.$message.warning("查询条件和列表数据不一致，不可编辑！");
     
500.         return false;
     
501.       }
     
502.       this.$set(row, "isEdit", true);
     
503.       // 当type=2时，部分可编辑
     
504.       if (this.type == 2) {
     
505.         this.$set(row, "editProp", []);
     
506.         let keys = Object.keys(row);
     
507.         for (let i = 0; i < keys.length; i++) {
     
508.           if (!row[keys[i]]) {
     
509.             row.editProp.push(keys[i]);
     
510.           }
     
511.         }
     
512.       }
     
513.     },
     
514.     // 点击保存按钮
     
515.     handleClickSaveRow(index, row) {
     
516.       console.log(index, row);
     
517.       let arr = this.multSaveIndexArr();
     
518.       if (arr.length > 1) {
     
519.         this.$confirm("当前页面存在多条数据需要保存, 是否继续?", "提示", {
     
520.           confirmButtonText: "确定",
     
521.           cancelButtonText: "取消",
     
522.           type: "warning",
     
523.         })
     
524.           .then(() => {
     
525.             let times = 0;
     
526.             arr.map((i) => {
     
527.               this.$set(this.tableData[i], "isEdit", false);
     
528.               let editRow = cloneDeep(this.tableData[i]);
     
529.               if (this.type == 2) {
     
530.                 delete editRow.editProp;
     
531.               }
     
532.               delete editRow.isEdit;
     
533.               this.$set(editRow, "acquisitionTime", editRow.time);
     
534.               delete editRow.time;
     
535.               this.$api.reportManagement[
     
536.                 editRow.id ? "editDeviceData" : "addDeviceData"
     
537.               ](editRow.id ? editRow : this.getAddRow(editRow)).then(() => {
     
538.                 times++;
     
539.                 if (times == arr.length) {
     
540.                   this.$message.success("编辑成功");
     
541.                   this.getTableData();
     
542.                 }
     
543.               });
     
544.             });
     
545.           })
     
546.           .catch(() => {
     
547.             this.$message({
     
548.               type: "info",
     
549.               message: "已取消",
     
550.             });
     
551.           });
     
552.       } else {
     
553.         this.$set(row, "isEdit", false);
     
554.         if (this.type == 2) {
     
555.           delete row.editProp;
     
556.         }
     
557.         let editRow = cloneDeep(row);
     
558.         delete editRow.isEdit;
     
559.         delete editRow.time;
     
560.         this.$set(editRow, "acquisitionTime", row.time);
     
561.         if (editRow.id) {
     
562.           this.editEvent(editRow);
     
563.         } else {
     
564.           let addRow = this.getAddRow(editRow);
     
565.           console.log("addRow", addRow);
     
566.           this.addEvent(addRow);
     
567.         }
     
568.       }
     
569.     },
     
570.     //获取新增数据
     
571.     getAddRow(row) {
     
572.       this.$set(row, "acode", this.assetCode);
     
573.       this.$set(row, "aname", this.assetName);
     
574.       return row;
     
575.     },
     
576.     // 单条数据-新增事件
     
577.     addEvent(form) {
     
578.       this.$api.reportManagement.addDeviceData(form).then((res) => {
     
579.         if (res.code == 200) {
     
580.           this.$message.success("编辑成功");
     
581.           this.getTableData();
     
582.         } else {
     
583.           this.$message.error(res.msg);
     
584.         }
     
585.       });
     
586.     },
     
587.     // 单条数据-编辑事件
     
588.     editEvent(form) {
     
589.       console.log("form", form);
     
590.       this.$api.reportManagement.editDeviceData(form).then((res) => {
     
591.         if (res.code == 200) {
     
592.           this.$message.success("编辑成功");
     
593.           this.getTableData();
     
594.         } else {
     
595.           this.$message.error(res.msg);
     
596.         }
     
597.       });
     
598.     },
     
599.     // 判断当前是否有多个保存的需求
     
600.     multSaveIndexArr() {
     
601.       let arr = [];
     
602.       this.tableData.map((item, index) => {
     
603.         if (item.isEdit) {
     
604.           arr.push(index);
     
605.         }
     
606.       });
     
607.       return arr;
     
608.     },
     
609.     // 转换状态
     
610.     formatStatus(val) {
     
611.       if (val) {
     
612.         let obj = this.options.find((item) => item.value == val);
     
613.         return obj ? obj.label : "";
     
614.       } else {
     
615.         return val;
     
616.       }
     
617.     },
     
618.   },
     
619. };
     
620. </script>
     
621. <style lang="less">
     
622. @import "../../../../assets/css/element-ui.less";
     
623. .deviceRunReport-template {
     
624.   width: 100%;
     
625.   height: 100%;
     
626.   .date_item {
     
627.     margin: 0 20px 0 24px;
     
628.   }
     
629.   .table {
     
630.     height: 100%;
     
631.     .slantTableStyle {
     
632.       width: 100%;
     
633.       height: 100%;
     
634.       .appendTable {
     
635.         box-sizing: border-box;
     
636.         padding: 12px;
     
637.       }
     
638.       .el-table {
     
639.         .el-table__header {
     
640.           position: relative;
     
641.         }
     
642.         .el-table__append-wrapper {
     
643.           width: var(--tableWidth);
     
644.         }
     
645.         .el-table__body-wrapper {
     
646.           overflow: auto;
     
647.         }
     
648.         thead {
     
649.           &::before {
     
650.             width: var(--slantOneColWidth);
     
651.             height: 100%;
     
652.             position: absolute;
     
653.             top: 0;
     
654.             left: 0;
     
655.             display: block;
     
656.             content: "";
     
657.             z-index: 1;
     
658.             box-sizing: border-box;
     
659.             background-image: linear-gradient(
     
660.               to bottom left,
     
661.               transparent 49.5%,
     
662.               @tableBorder,
     
663.               transparent 50.5%
     
664.             );
     
665.           }
     
666.           &.is-group tr:first-of-type th:first-of-type {
     
667.             border-bottom: none;
     
668.           }
     
669.         }
     
670.       }
     
671.     }
     
672.   }
     
673. }
     
674. </style>

复制代码

下面是js代码

1. /**
   
2. * 工艺运行记录表表头
   
3. */
   
4. export const craftRunReportHead = {
   
5.   1: [
   
6.     {
   
7.       name: "巡视时间",
   
8.       prop: "time",
   
9.     },
   
10.     {
    
11.       name: "污水处理量",
    
12.       columns: [
    
13.         {
    
14.           name: "进水瞬时 流量m³/h",
    
15.           prop: "inInstantFlow",
    
16.           rule: "isFloat",
    
17.           columns: [
    
18.             {
    
19.               name: "1#系列",
    
20.               prop: "inInstantFlow1",
    
21.               rule: "isFloat",
    
22.             },
    
23.             {
    
24.               name: "2#系列",
    
25.               prop: "inInstantFlow2",
    
26.               rule: "isFloat",
    
27.             },
    
28.           ],
    
29.         },
    
30.         {
    
31.           name: "出水瞬时 流量m³/h",
    
32.           prop: "outInstantFlow",
    
33.           rule: "isFloat",
    
34.         },
    
35.         {
    
36.           name: "内回流瞬时 流量m³/h",
    
37.           prop: "inGyrusInstantFlow",
    
38.           rule: "isFloat",
    
39.           columns: [
    
40.             {
    
41.               name: "1#系列",
    
42.               prop: "inGyrusInstantFlow1",
    
43.               rule: "isFloat",
    
44.             },
    
45.             {
    
46.               name: "2#系列",
    
47.               prop: "inGyrusInstantFlow2",
    
48.               rule: "isFloat",
    
49.             },
    
50.           ],
    
51.         },
    
52.         {
    
53.           name: "外回流瞬时 流量m³/h",
    
54.           prop: "exGyrusInstantFlow",
    
55.           rule: "isFloat",
    
56.           columns: [
    
57.             {
    
58.               name: "1#系列",
    
59.               prop: "exGyrusInstantFlow1",
    
60.               rule: "isFloat",
    
61.             },
    
62.             {
    
63.               name: "2#系列",
    
64.               prop: "exGyrusInstantFlow2",
    
65.               rule: "isFloat",
    
66.             },
    
67.           ],
    
68.         },
    
69.       ],
    
70.     },
    
71.     {
    
72.       name: "PH值",
    
73.       columns: [
    
74.         {
    
75.           columns: [
    
76.             {
    
77.               name: "进水",
    
78.               prop: "inPh",
    
79.               rule: "isFloat",
    
80.             },
    
81.             {
    
82.               name: "出水",
    
83.               prop: "outPh",
    
84.               rule: "isFloat",
    
85.             },
    
86.           ],
    
87.         },
    
88.       ],
    
89.     },
    
90.     {
    
91.       name: "COD mg/L",
    
92.       columns: [
    
93.         {
    
94.           columns: [
    
95.             {
    
96.               name: "进水",
    
97.               prop: "inCod",
    
98.               rule: "isFloat",
    
99.             },
    
100.             {
     
101.               name: "出水",
     
102.               prop: "outCod",
     
103.               rule: "isFloat",
     
104.             },
     
105.           ],
     
106.         },
     
107.       ],
     
108.     },
     
109.     {
     
110.       name: "氨氮mg/L",
     
111.       columns: [
     
112.         {
     
113.           columns: [
     
114.             {
     
115.               name: "进水",
     
116.               prop: "inNh3n",
     
117.               rule: "isFloat",
     
118.             },
     
119.             {
     
120.               name: "出水",
     
121.               prop: "outNh3n",
     
122.               rule: "isFloat",
     
123.             },
     
124.           ],
     
125.         },
     
126.       ],
     
127.     },
     
128.     {
     
129.       name: "总磷mg/L",
     
130.       columns: [
     
131.         {
     
132.           columns: [
     
133.             {
     
134.               name: "进水",
     
135.               prop: "inTp",
     
136.               rule: "isFloat",
     
137.             },
     
138.             {
     
139.               name: "出水",
     
140.               prop: "outTp",
     
141.               rule: "isFloat",
     
142.             },
     
143.           ],
     
144.         },
     
145.       ],
     
146.     },
     
147.     {
     
148.       name: "总氮mg/L",
     
149.       columns: [
     
150.         {
     
151.           columns: [
     
152.             {
     
153.               name: "进水",
     
154.               prop: "inTn",
     
155.               rule: "isFloat",
     
156.             },
     
157.             {
     
158.               name: "出水",
     
159.               prop: "outTn",
     
160.               rule: "isFloat",
     
161.             },
     
162.           ],
     
163.         },
     
164.       ],
     
165.     },
     
166.     {
     
167.       name: "DO仪表mg/L",
     
168.       columns: [
     
169.         {
     
170.           name: "厌氧池",
     
171.           columns: [
     
172.             {
     
173.               name: "1#系列",
     
174.               prop: "anaerobicTank1",
     
175.               rule: "isFloat",
     
176.             },
     
177.             {
     
178.               name: "2#系列",
     
179.               prop: "anaerobicTank2",
     
180.               rule: "isFloat",
     
181.             },
     
182.           ],
     
183.         },
     
184.         {
     
185.           name: "缺氧池",
     
186.           columns: [
     
187.             {
     
188.               name: "1#系列",
     
189.               prop: "anoxicPool1",
     
190.               rule: "isFloat",
     
191.             },
     
192.             {
     
193.               name: "2#系列",
     
194.               prop: "anoxicPool2",
     
195.               rule: "isFloat",
     
196.             },
     
197.           ],
     
198.         },
     
199.         {
     
200.           name: "1#好氧池",
     
201.           columns: [
     
202.             {
     
203.               name: "前端",
     
204.               prop: "aerobicTank1Before",
     
205.               rule: "isFloat",
     
206.             },
     
207.             {
     
208.               name: "后端",
     
209.               prop: "aerobicTank1After",
     
210.               rule: "isFloat",
     
211.             },
     
212.           ],
     
213.         },
     
214.         {
     
215.           name: "2#好氧池",
     
216.           columns: [
     
217.             {
     
218.               name: "前端",
     
219.               prop: "aerobicTank2Before",
     
220.               rule: "isFloat",
     
221.             },
     
222.             {
     
223.               name: "后端",
     
224.               prop: "aerobicTank2After",
     
225.               rule: "isFloat",
     
226.             },
     
227.           ],
     
228.         },
     
229.       ],
     
230.     },
     
231.     {
     
232.       name: "ORP仪表",
     
233.       columns: [
     
234.         {
     
235.           name: "mv",
     
236.           columns: [
     
237.             {
     
238.               name: "厌氧池",
     
239.               prop: "orpAnaerobicPool",
     
240.               rule: "isFloat",
     
241.             },
     
242.           ],
     
243.         },
     
244.         {
     
245.           name: "mv",
     
246.           columns: [
     
247.             {
     
248.               name: "1#好氧池",
     
249.               prop: "orpAerobicPool1",
     
250.               rule: "isFloat",
     
251.             },
     
252.           ],
     
253.         },
     
254.         {
     
255.           name: "mv",
     
256.           columns: [
     
257.             {
     
258.               name: "2#好氧池",
     
259.               prop: "orpAerobicPool2",
     
260.               rule: "isFloat",
     
261.             },
     
262.           ],
     
263.         },
     
264.       ],
     
265.     },
     
266.     {
     
267.       name: "MLSS (污泥浓度)",
     
268.       columns: [
     
269.         {
     
270.           name: "mg/L",
     
271.           columns: [
     
272.             {
     
273.               name: "1#好氧池",
     
274.               prop: "mlss1",
     
275.               rule: "isFloat",
     
276.             },
     
277.           ],
     
278.         },
     
279.         {
     
280.           name: "mg/L",
     
281.           columns: [
     
282.             {
     
283.               name: "2#好氧池",
     
284.               prop: "mlss2",
     
285.               rule: "isFloat",
     
286.             },
     
287.           ],
     
288.         },
     
289.       ],
     
290.     },
     
291.     {
     
292.       name: "SV30（2-4次/天）",
     
293.       columns: [
     
294.         {
     
295.           name: "%",
     
296.           columns: [
     
297.             {
     
298.               name: "1#好氧池",
     
299.               prop: "sv30One",
     
300.               rule: "isFloat",
     
301.             },
     
302.           ],
     
303.         },
     
304.         {
     
305.           name: "%",
     
306.           columns: [
     
307.             {
     
308.               name: "2#好氧池",
     
309.               prop: "sv30Two",
     
310.               rule: "isFloat",
     
311.             },
     
312.           ],
     
313.         },
     
314.       ],
     
315.     },
     
316.     {
     
317.       name: "进水温度/盐度",
     
318.       prop: "inTemOrSal",
     
319.       rule: "isFloat",
     
320.     },
     
321.   ],
     
322.   2: [
     
323.     {
     
324.       name: "巡视时间",
     
325.       prop: "time",
     
326.     },
     
327.     {
     
328.       name: "污水处理量",
     
329.       columns: [
     
330.         {
     
331.           name: "进水瞬时 流量m³/h",
     
332.           prop: "inInstantFlow",
     
333.           rule: "isFloat",
     
334.           columns: [
     
335.             {
     
336.               name: "1#系列",
     
337.               prop: "inInstantFlow1",
     
338.               rule: "isFloat",
     
339.             },
     
340.             {
     
341.               name: "2#系列",
     
342.               prop: "inInstantFlow2",
     
343.               rule: "isFloat",
     
344.             },
     
345.           ],
     
346.         },
     
347.         {
     
348.           name: "出水瞬时 流量m³/h",
     
349.           prop: "outInstantFlow",
     
350.           rule: "isFloat",
     
351.         },
     
352.         {
     
353.           name: "内回流瞬时 流量m³/h",
     
354.           prop: "inGyrusInstantFlow",
     
355.           rule: "isFloat",
     
356.           columns: [
     
357.             {
     
358.               name: "1#系列",
     
359.               prop: "inGyrusInstantFlow1",
     
360.               rule: "isFloat",
     
361.             },
     
362.             {
     
363.               name: "2#系列",
     
364.               prop: "inGyrusInstantFlow2",
     
365.               rule: "isFloat",
     
366.             },
     
367.           ],
     
368.         },
     
369.         {
     
370.           name: "外回流瞬时 流量m³/h",
     
371.           prop: "exGyrusInstantFlow",
     
372.           rule: "isFloat",
     
373.           columns: [
     
374.             {
     
375.               name: "1#系列",
     
376.               prop: "exGyrusInstantFlow1",
     
377.               rule: "isFloat",
     
378.             },
     
379.             {
     
380.               name: "2#系列",
     
381.               prop: "exGyrusInstantFlow2",
     
382.               rule: "isFloat",
     
383.             },
     
384.           ],
     
385.         },
     
386.       ],
     
387.     },
     
388.     {
     
389.       name: "PH值",
     
390.       columns: [
     
391.         {
     
392.           columns: [
     
393.             {
     
394.               name: "进水",
     
395.               prop: "inPh",
     
396.               rule: "isFloat",
     
397.             },
     
398.             {
     
399.               name: "出水",
     
400.               prop: "outPh",
     
401.               rule: "isFloat",
     
402.             },
     
403.           ],
     
404.         },
     
405.       ],
     
406.     },
     
407.     {
     
408.       name: "COD mg/L",
     
409.       columns: [
     
410.         {
     
411.           columns: [
     
412.             {
     
413.               name: "进水",
     
414.               prop: "inCod",
     
415.               rule: "isFloat",
     
416.             },
     
417.             {
     
418.               name: "出水",
     
419.               prop: "outCod",
     
420.               rule: "isFloat",
     
421.             },
     
422.           ],
     
423.         },
     
424.       ],
     
425.     },
     
426.     {
     
427.       name: "氨氮mg/L",
     
428.       columns: [
     
429.         {
     
430.           columns: [
     
431.             {
     
432.               name: "进水",
     
433.               prop: "inNh3n",
     
434.               rule: "isFloat",
     
435.             },
     
436.             {
     
437.               name: "出水",
     
438.               prop: "outNh3n",
     
439.               rule: "isFloat",
     
440.             },
     
441.           ],
     
442.         },
     
443.       ],
     
444.     },
     
445.     {
     
446.       name: "总磷mg/L",
     
447.       columns: [
     
448.         {
     
449.           columns: [
     
450.             {
     
451.               name: "进水",
     
452.               prop: "inTp",
     
453.               rule: "isFloat",
     
454.             },
     
455.             {
     
456.               name: "出水",
     
457.               prop: "outTp",
     
458.               rule: "isFloat",
     
459.             },
     
460.           ],
     
461.         },
     
462.       ],
     
463.     },
     
464.     {
     
465.       name: "总氮mg/L",
     
466.       columns: [
     
467.         {
     
468.           columns: [
     
469.             {
     
470.               name: "进水",
     
471.               prop: "inTn",
     
472.               rule: "isFloat",
     
473.             },
     
474.             {
     
475.               name: "出水",
     
476.               prop: "outTn",
     
477.               rule: "isFloat",
     
478.             },
     
479.           ],
     
480.         },
     
481.       ],
     
482.     },
     
483.     {
     
484.       name: "DO仪表mg/L",
     
485.       columns: [
     
486.         {
     
487.           name: "厌氧池",
     
488.           columns: [
     
489.             {
     
490.               name: "1#系列",
     
491.               prop: "anaerobicTank1",
     
492.               rule: "isFloat",
     
493.             },
     
494.             {
     
495.               name: "2#系列",
     
496.               prop: "anaerobicTank2",
     
497.               rule: "isFloat",
     
498.             },
     
499.           ],
     
500.         },
     
501.         {
     
502.           name: "缺氧池",
     
503.           columns: [
     
504.             {
     
505.               name: "1#系列",
     
506.               prop: "anoxicPool1",
     
507.               rule: "isFloat",
     
508.             },
     
509.             {
     
510.               name: "2#系列",
     
511.               prop: "anoxicPool2",
     
512.               rule: "isFloat",
     
513.             },
     
514.           ],
     
515.         },
     
516.         {
     
517.           name: "1#好氧池",
     
518.           columns: [
     
519.             {
     
520.               name: "前端",
     
521.               prop: "aerobicTank1Before",
     
522.               rule: "isFloat",
     
523.             },
     
524.             {
     
525.               name: "后端",
     
526.               prop: "aerobicTank1After",
     
527.               rule: "isFloat",
     
528.             },
     
529.           ],
     
530.         },
     
531.         {
     
532.           name: "2#好氧池",
     
533.           columns: [
     
534.             {
     
535.               name: "前端",
     
536.               prop: "aerobicTank2Before",
     
537.               rule: "isFloat",
     
538.             },
     
539.             {
     
540.               name: "后端",
     
541.               prop: "aerobicTank2After",
     
542.               rule: "isFloat",
     
543.             },
     
544.           ],
     
545.         },
     
546.       ],
     
547.     },
     
548.     {
     
549.       name: "MLSS (污泥浓度)",
     
550.       columns: [
     
551.         {
     
552.           name: "mg/L",
     
553.           columns: [
     
554.             {
     
555.               name: "1#好氧池",
     
556.               prop: "mlss1",
     
557.               rule: "isFloat",
     
558.             },
     
559.           ],
     
560.         },
     
561.         {
     
562.           name: "mg/L",
     
563.           columns: [
     
564.             {
     
565.               name: "2#好氧池",
     
566.               prop: "mlss2",
     
567.               rule: "isFloat",
     
568.             },
     
569.           ],
     
570.         },
     
571.       ],
     
572.     },
     
573.     {
     
574.       name: "SV30（2-4次/天）",
     
575.       columns: [
     
576.         {
     
577.           name: "%",
     
578.           columns: [
     
579.             {
     
580.               name: "1#好氧池",
     
581.               prop: "sv30One",
     
582.               rule: "isFloat",
     
583.             },
     
584.           ],
     
585.         },
     
586.         {
     
587.           name: "%",
     
588.           columns: [
     
589.             {
     
590.               name: "2#好氧池",
     
591.               prop: "sv30Two",
     
592.               rule: "isFloat",
     
593.             },
     
594.           ],
     
595.         },
     
596.       ],
     
597.     },
     
598.     {
     
599.       name: "二沉池泥水界面仪",
     
600.       columns: [
     
601.         {
     
602.           name: "m",
     
603.           columns: [
     
604.             {
     
605.               name: "1#二沉池",
     
606.               prop: "sedimentationTank1",
     
607.               rule: "isFloat",
     
608.             },
     
609.           ],
     
610.         },
     
611.         {
     
612.           name: "m",
     
613.           columns: [
     
614.             {
     
615.               name: "2#二沉池",
     
616.               prop: "sedimentationTank2",
     
617.               rule: "isFloat",
     
618.             },
     
619.           ],
     
620.         },
     
621.       ],
     
622.     },
     
623.     {
     
624.       name: "进水温度/盐度",
     
625.       prop: "inTemOrSal",
     
626.       rule: "isFloat",
     
627.     },
     
628.   ],
     
629.   // 其他水厂
     
630.   3: [
     
631.     {
     
632.       name: "巡视时间",
     
633.       prop: "time",
     
634.     },
     
635.     {
     
636.       name: "污水处理量",
     
637.       columns: [
     
638.         {
     
639.           name: "进水瞬时 流量m³/h",
     
640.           prop: "inInstantFlow",
     
641.           rule: "isFloat",
     
642.           columns: [
     
643.             {
     
644.               name: "1#系列",
     
645.               prop: "inInstantFlow1",
     
646.               rule: "isFloat",
     
647.             },
     
648.             {
     
649.               name: "2#系列",
     
650.               prop: "inInstantFlow2",
     
651.               rule: "isFloat",
     
652.             },
     
653.           ],
     
654.         },
     
655.         {
     
656.           name: "出水瞬时 流量m³/h",
     
657.           prop: "outInstantFlow",
     
658.           rule: "isFloat",
     
659.         },
     
660.         {
     
661.           name: "内回流瞬时 流量m³/h",
     
662.           prop: "inGyrusInstantFlow",
     
663.           rule: "isFloat",
     
664.           columns: [
     
665.             {
     
666.               name: "1#系列",
     
667.               prop: "inGyrusInstantFlow1",
     
668.               rule: "isFloat",
     
669.             },
     
670.             {
     
671.               name: "2#系列",
     
672.               prop: "inGyrusInstantFlow2",
     
673.               rule: "isFloat",
     
674.             },
     
675.           ],
     
676.         },
     
677.         {
     
678.           name: "外回流瞬时 流量m³/h",
     
679.           prop: "exGyrusInstantFlow",
     
680.           rule: "isFloat",
     
681.           columns: [
     
682.             {
     
683.               name: "1#系列",
     
684.               prop: "exGyrusInstantFlow1",
     
685.               rule: "isFloat",
     
686.             },
     
687.             {
     
688.               name: "2#系列",
     
689.               prop: "exGyrusInstantFlow2",
     
690.               rule: "isFloat",
     
691.             },
     
692.           ],
     
693.         },
     
694.       ],
     
695.     },
     
696.     {
     
697.       name: "PH值",
     
698.       columns: [
     
699.         {
     
700.           columns: [
     
701.             {
     
702.               name: "进水",
     
703.               prop: "inPh",
     
704.               rule: "isFloat",
     
705.             },
     
706.             {
     
707.               name: "出水",
     
708.               prop: "outPh",
     
709.               rule: "isFloat",
     
710.             },
     
711.           ],
     
712.         },
     
713.       ],
     
714.     },
     
715.     {
     
716.       name: "COD mg/L",
     
717.       columns: [
     
718.         {
     
719.           columns: [
     
720.             {
     
721.               name: "进水",
     
722.               prop: "inCod",
     
723.               rule: "isFloat",
     
724.             },
     
725.             {
     
726.               name: "出水",
     
727.               prop: "outCod",
     
728.               rule: "isFloat",
     
729.             },
     
730.           ],
     
731.         },
     
732.       ],
     
733.     },
     
734.     {
     
735.       name: "氨氮mg/L",
     
736.       columns: [
     
737.         {
     
738.           columns: [
     
739.             {
     
740.               name: "进水",
     
741.               prop: "inNh3n",
     
742.               rule: "isFloat",
     
743.             },
     
744.             {
     
745.               name: "出水",
     
746.               prop: "outNh3n",
     
747.               rule: "isFloat",
     
748.             },
     
749.           ],
     
750.         },
     
751.       ],
     
752.     },
     
753.     {
     
754.       name: "总磷mg/L",
     
755.       columns: [
     
756.         {
     
757.           columns: [
     
758.             {
     
759.               name: "进水",
     
760.               prop: "inTp",
     
761.               rule: "isFloat",
     
762.             },
     
763.             {
     
764.               name: "出水",
     
765.               prop: "outTp",
     
766.               rule: "isFloat",
     
767.             },
     
768.           ],
     
769.         },
     
770.       ],
     
771.     },
     
772.     {
     
773.       name: "总氮mg/L",
     
774.       columns: [
     
775.         {
     
776.           columns: [
     
777.             {
     
778.               name: "进水",
     
779.               prop: "inTn",
     
780.               rule: "isFloat",
     
781.             },
     
782.             {
     
783.               name: "出水",
     
784.               prop: "outTn",
     
785.               rule: "isFloat",
     
786.             },
     
787.           ],
     
788.         },
     
789.       ],
     
790.     },
     
791.     {
     
792.       name: "DO仪表mg/L",
     
793.       columns: [
     
794.         {
     
795.           name: "厌氧池",
     
796.           columns: [
     
797.             {
     
798.               name: "1#系列",
     
799.               prop: "anaerobicTank1",
     
800.               rule: "isFloat",
     
801.             },
     
802.             {
     
803.               name: "2#系列",
     
804.               prop: "anaerobicTank2",
     
805.               rule: "isFloat",
     
806.             },
     
807.           ],
     
808.         },
     
809.         {
     
810.           name: "缺氧池",
     
811.           columns: [
     
812.             {
     
813.               name: "1#系列",
     
814.               prop: "anoxicPool1",
     
815.               rule: "isFloat",
     
816.             },
     
817.             {
     
818.               name: "2#系列",
     
819.               prop: "anoxicPool2",
     
820.               rule: "isFloat",
     
821.             },
     
822.           ],
     
823.         },
     
824.         {
     
825.           name: "1#好氧池",
     
826.           columns: [
     
827.             {
     
828.               name: "前端",
     
829.               prop: "aerobicTank1Before",
     
830.               rule: "isFloat",
     
831.             },
     
832.             {
     
833.               name: "后端",
     
834.               prop: "aerobicTank1After",
     
835.               rule: "isFloat",
     
836.             },
     
837.           ],
     
838.         },
     
839.         {
     
840.           name: "2#好氧池",
     
841.           columns: [
     
842.             {
     
843.               name: "前端",
     
844.               prop: "aerobicTank2Before",
     
845.               rule: "isFloat",
     
846.             },
     
847.             {
     
848.               name: "后端",
     
849.               prop: "aerobicTank2After",
     
850.               rule: "isFloat",
     
851.             },
     
852.           ],
     
853.         },
     
854.       ],
     
855.     },
     
856.     {
     
857.       name: "MLSS (污泥浓度)",
     
858.       columns: [
     
859.         {
     
860.           name: "mg/L",
     
861.           columns: [
     
862.             {
     
863.               name: "1#好氧池",
     
864.               prop: "mlss1",
     
865.               rule: "isFloat",
     
866.             },
     
867.           ],
     
868.         },
     
869.         {
     
870.           name: "mg/L",
     
871.           columns: [
     
872.             {
     
873.               name: "2#好氧池",
     
874.               prop: "mlss2",
     
875.               rule: "isFloat",
     
876.             },
     
877.           ],
     
878.         },
     
879.       ],
     
880.     },
     
881.     {
     
882.       name: "SV30（2-4次/天）",
     
883.       columns: [
     
884.         {
     
885.           name: "%",
     
886.           columns: [
     
887.             {
     
888.               name: "1#好氧池",
     
889.               prop: "sv30One",
     
890.               rule: "isFloat",
     
891.             },
     
892.           ],
     
893.         },
     
894.         {
     
895.           name: "%",
     
896.           columns: [
     
897.             {
     
898.               name: "2#好氧池",
     
899.               prop: "sv30Two",
     
900.               rule: "isFloat",
     
901.             },
     
902.           ],
     
903.         },
     
904.       ],
     
905.     },
     
906.     {
     
907.       name: "二沉池泥水界面仪",
     
908.       columns: [
     
909.         {
     
910.           name: "m",
     
911.           columns: [
     
912.             {
     
913.               name: "1#二沉池",
     
914.               prop: "sedimentationTank1",
     
915.               rule: "isFloat",
     
916.             },
     
917.           ],
     
918.         },
     
919.         {
     
920.           name: "m",
     
921.           columns: [
     
922.             {
     
923.               name: "2#二沉池",
     
924.               prop: "sedimentationTank2",
     
925.               rule: "isFloat",
     
926.             },
     
927.           ],
     
928.         },
     
929.         {
     
930.           name: "m",
     
931.           columns: [
     
932.             {
     
933.               name: "3#二沉池",
     
934.               prop: "sedimentationTank3",
     
935.               rule: "isFloat",
     
936.             },
     
937.           ],
     
938.         },
     
939.         {
     
940.           name: "m",
     
941.           columns: [
     
942.             {
     
943.               name: "4#二沉池",
     
944.               prop: "sedimentationTank4",
     
945.               rule: "isFloat",
     
946.             },
     
947.           ],
     
948.         },
     
949.       ],
     
950.     },
     
951.     {
     
952.       name: "进水温度/盐度",
     
953.       prop: "inTemOrSal",
     
954.       rule: "isFloat",
     
955.     },
     
956.   ],
     
957. };

复制代码

到此这篇关于el-table 动态合并不定项多级表头的方法的文章就介绍到这了,更多相关el-table 动态合并不定项表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/292042zsd.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！