我們的需求是根據(jù)不同的廠配不同的多級(jí)表頭,每個(gè)表頭有需要合并的項(xiàng),并且不確定

如圖所示

對(duì)表格進(jìn)行循環(huán)操作,此處不贅述,最下方有全部代碼

表頭是單獨(dú)寫在js方便后期更改,然后引入js文件,然后根據(jù)情況去調(diào)取

// 獲取表頭 getHeader(nv) { this.factoryCodes = nv; this.headerRow2 = []; // 'xx污水處理廠' if (nv == 'zgjn-H WS 0101') {//修改表頭this.tableHeader = deviceRunReportHead[1];this.headerRow2 = ['紫外線殺菌裝置']; // 需要合并的表頭名稱數(shù)組 } else if (nv == 'zgjn-H WS 0106') {// xx污水處理廠this.tableHeader = deviceRunReportHead[2];this.headerRow2 = ['紫外線殺菌裝置', '除臭系統(tǒng)']; // 需要合并的表頭名稱數(shù)組 } else if (nv == 'zgjn-H WS 0105') {//xx污水處理廠this.tableHeader = deviceRunReportHead[3];this.headerRow2 = ['紫外線殺菌裝置', '除臭系統(tǒng)']; // 需要合并的表頭名稱數(shù)組 } else {// 其他廠this.tableHeader = deviceRunReportHead[3]; } // 刷新表格樣式 this.$nextTick(() => {this.$refs.slantTable.doLayout();this.getTableDom(); }); this.keyIndex++; // 此處是重點(diǎn),更新完表頭之后必須強(qiáng)制刷新表格,否則上一次合并的信息會(huì)影響此次合并,keyIndex在el-table的key上, },

以下是合并方法

//表頭樣式設(shè)置，將“紫外線殺菌裝置”字段設(shè)置為行高2（默認(rèn)是行高1），并將其所占行偏移的部分設(shè)置為none headerStyle({ row, column, rowIndex, columnIndex }) { if (this.headerRow2.includes(column.label)) {this.$nextTick(() => { if (document.getElementsByClassName(column.id).length !== 0) { document .getElementsByClassName(column.id)[0] .setAttribute('rowSpan', 2); // 默認(rèn)合并兩行,因?yàn)槲疫@都是最多只需要合并兩行 return false; }});return column; } if (column.label == undefined) { // 最后一層是沒有name的即沒有l(wèi)abel,則取消合并return { display: 'none' }; } },

下方是全部vue代碼

<!-- 設(shè)備運(yùn)行記錄表 --><template> <div class='deviceRunReport-template'> <pageIndexTemp @refresh='refreshTableDom'> <!-- 查詢框 --> <el-form ref='form' slot='searchBox' :model='form' inline size='small'><el-form-item label='日期' class='date_item'> <el-date-picker v-model='form.queryTimeDay' type='date' placeholder='選擇日期' value-format='yyyy-MM-dd' :clearable='false' > </el-date-picker></el-form-item><el-form-item label='城鎮(zhèn)污水處理廠'> <el-select v-model='form.assetCode' placeholder='請(qǐng)選擇城鎮(zhèn)污水處理廠' > <el-option v-for='item in townSwagePlantList' :key='item.id' :label='item.aname' :value='item.acode' > </el-option> </el-select></el-form-item><el-form-item> <el-button type='primary' icon='el-icon-search' @click='onSearch' size='mini' >篩選</el-button ></el-form-item> </el-form> <!-- 右邊按鈕 --> <div slot='btnsR'><el-button icon='el-icon-download' @click='onExport(1)' size='mini' type='primary' >按日導(dǎo)出</el-button><el-button icon='el-icon-download' @click='onExport(2)' v-if='type == 1' size='mini' type='primary' >按月導(dǎo)出</el-button> </div> <!-- 表格 --> <div slot='tablePage' v-loading='Loading'><div :style='{ '--slantOneColWidth': tableOneColWidth + 'px', '--tableWidth': tableWidth, }'> <el-table :data='tableData' ref='slantTable' :header-cell- border :key='keyIndex' > <el-table-column v-for='(column1, index) in tableHeader' :key='index' :label='column1.name' : : > <el-table-columnv-for='(column2, index2) in column1.columns':key='index2':prop='column2.prop':label='column2.name': : ><el-table-column v-for='(column3, index3) in column2.columns' :key='index3' :prop='column3.prop' :label='column3.name' : : > <template slot-scope='scope'> <!-- 編輯 --> <div v-if='(type == 3 && scope.row.isEdit && !disabledProp.includes(column3.prop)) || (type == 2 && scope.row.isEdit && scope.row.editProp.includes(column3.prop)) ' > <el-selectv-model='scope.row[column3.prop]'placeholder='請(qǐng)選擇'size='mini'clearable ><el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option> </el-select> </div> <div v-else> {{disabledProp.includes(column3.prop) ? formatTime(scope.row[column3.prop]) : formatStatus(scope.row[column3.prop]) }} </div> </template></el-table-column><template slot-scope='scope'> <!-- 編輯 --> <div v-if=' (type == 3 &&scope.row.isEdit &&!disabledProp.includes(column2.prop)) ||(type == 2 && scope.row.isEdit && scope.row.editProp.includes(column2.prop)) ' > <el-select v-model='scope.row[column2.prop]' placeholder='請(qǐng)選擇' size='mini' clearable > <el-optionv-for='item in options':key='item.value':label='item.label':value='item.value' > </el-option> </el-select> </div> <div v-else> {{ disabledProp.includes(column2.prop)? formatTime(scope.row[column2.prop]): formatStatus(scope.row[column2.prop]) }} </div></template> </el-table-column> <template slot-scope='scope'><!-- 編輯 --><div v-if=' (type == 3 && scope.row.isEdit && !disabledProp.includes(column1.prop)) || (type == 2 &&scope.row.isEdit &&scope.row.editProp.includes(column1.prop)) '> <el-select v-model='scope.row[column1.prop]' placeholder='請(qǐng)選擇' size='mini' clearable > <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value' > </el-option> </el-select></div><div v-else> {{ disabledProp.includes(column1.prop) ? formatTime(scope.row[column1.prop]) : formatStatus(scope.row[column1.prop]) }}</div> </template> </el-table-column> <el-table-column fixed='right' label='操作' v-if='type !== 1' > <template slot-scope='scope'><el-button type='primary' plain size='mini' v-if=' type == 3 && !scope.row.isEdit && compareTime(scope.row) ' @click='handleClickEdit(scope.$index, scope.row)' >編輯</el-button><el-button type='primary' plain size='mini' v-if=' type == 2 && ifShowEdit(scope.row) && !scope.row.isEdit && compareTime(scope.row) ' @click='handleClickEdit(scope.$index, scope.row)' >編輯</el-button><el-button type='primary' size='mini' v-if='scope.row.isEdit' @click='handleClickSaveRow(scope.$index, scope.row)' >保存</el-button> </template> </el-table-column> <div slot='append' class='appendTable'> 填表要求：1、正常運(yùn)行：√； 2、故障：×；3、備用停機(jī)：△；4、其他：開機(jī)時(shí)間或停機(jī)時(shí)間等情況請(qǐng)?zhí)顚憘渥? </div> </el-table></div> </div> </pageIndexTemp> </div></template><script>import moment from 'moment';import cloneDeep from 'lodash.clonedeep';import { downloadXls, downloadZip } from '@/utils/download';import pageIndexTemp from '../../../components/pageIndexTemp.vue';import { deviceRunReportHead } from '@/utils/deviceRunReportHead.js';export default { name: 'deviceRunReport', components: { pageIndexTemp }, props: { // 說明： // 1 - 不可編輯，僅展示，默認(rèn)值是1； // 2 - 空白處可編輯，保存后已填入部分不可編輯，單行無空白不出現(xiàn)任何按鈕； // 3 - 除部分固定字段外數(shù)據(jù)可編輯，出現(xiàn)按鈕 type: { type: Number, default: 1, }, }, filters: {}, data() { return { //查詢參數(shù) form: {queryTimeDay: moment().format('yyyy-MM-DD'),assetCode: '', }, Loading: false, // 城鎮(zhèn)污水廠列表 townSwagePlantList: [], //表格數(shù)據(jù) tableData: [], tableOneColWidth: 100, tableMinColumnWidth: 80, tableWidth: '0px', tableAlignDef: 'center', tableHeader: [], options: [{ label: '√', value: '0' },{ label: '△', value: '1' },{ label: '×', value: '2' }, ], disabledProp: ['time'], queryTime: '', assetCode: '', assetName: '', startForm: {}, factoryCodes: '', headerRow2: [], keyIndex: 1, }; }, mounted() { this.getTableDom(); }, created() { this.getTownSwagePlantList(); }, methods: { //查詢 onSearch() { // this.getHeader(this.form.assetCode); this.getTableData(); }, // 查詢城鎮(zhèn)污水廠列表 getTownSwagePlantList() { this.$api.reportManagement.getAssetList({ level: 1, cId: 42 }).then((res) => { this.townSwagePlantList = res.data || []; if (this.townSwagePlantList.length > 0) { this.form.assetCode = this.townSwagePlantList[0].acode; this.assetCode = this.form.assetCode; // this.getHeader(this.form.assetCode); // 獲取表頭 this.assetName = this.townSwagePlantList[0].aname; this.getTableData(); }}); }, // 獲取表頭 getHeader(nv) { this.factoryCodes = nv; this.headerRow2 = []; // 'xx污水處理廠' if (nv == 'zgjn-H WS 0101') {//修改表頭this.tableHeader = deviceRunReportHead[1];this.headerRow2 = ['紫外線殺菌裝置']; // 需要合并的表頭 } else if (nv == 'zgjn-H WS 0106') {// xx污水處理廠this.tableHeader = deviceRunReportHead[2];this.headerRow2 = ['紫外線殺菌裝置', '除臭系統(tǒng)']; // 需要合并的表頭 } else if (nv == 'zgjn-H WS 0105') {// xx污水處理廠this.tableHeader = deviceRunReportHead[3];this.headerRow2 = ['紫外線殺菌裝置', '除臭系統(tǒng)']; // 需要合并的表頭 } else {// 其他廠this.tableHeader = deviceRunReportHead[3]; } // 刷新表格樣式 this.$nextTick(() => {this.$refs.slantTable.doLayout();this.getTableDom(); }); this.keyIndex++; }, //查詢表格數(shù)據(jù) getTableData() { this.Loading = true; this.queryTime = this.form.queryTimeDay; this.assetCode = this.form.assetCode; this.assetName =this.townSwagePlantList.find((item) => item.acode == this.assetCode) .aname || ''; this.startForm = JSON.parse(JSON.stringify(this.form)); this.$api.reportManagement.getDeviceState(this.form).then((res) => { if (res.code == 200) { this.tableData = res.data || []; this.getHeader(this.form.assetCode); // 獲取表頭 } else { this.$message.error(res.msg); } this.Loading = false;}).catch(() => { this.Loading = false;}); }, // 更新table dom refreshTableDom() { this.$nextTick(() => {this.$refs.slantTable.doLayout(); }); }, // 時(shí)間轉(zhuǎn)換 formatTime(val) { return moment(val).format('HH:mm'); }, //獲取table的DOM元素，篩查出el-table__header的DOM，并獲取其寬度，用以控制append部分的寬度設(shè)置 getTableDom() { let slantTable = this.$refs.slantTable; let tableDom = slantTable.$children.find((el) => el.$el.className == 'el-table__header' ); this.tableWidth = tableDom.table.bodyWidth; }, //表頭樣式設(shè)置，將“紫外線殺菌裝置”字段設(shè)置為行高2（默認(rèn)是行高1），并將其所占行偏移的部分設(shè)置為none headerStyle({ row, column, rowIndex, columnIndex }) { if (this.headerRow2.includes(column.label)) {this.$nextTick(() => { if (document.getElementsByClassName(column.id).length !== 0) { document .getElementsByClassName(column.id)[0] .setAttribute('rowSpan', 2); return false; }});return column; } if (column.label == undefined) {return { display: 'none' }; } }, // 點(diǎn)擊導(dǎo)出按鈕 onExport(val) { if (this.form.assetCode == '' || this.form.queryTimeDay == '') {this.$message.warning('請(qǐng)選擇日期和污水廠后再進(jìn)行導(dǎo)出');return; } let flag = JSON.stringify(this.form) == JSON.stringify(this.startForm); // 按日導(dǎo)出重新搜索列表 if (val == 1 && !flag) {this.getTableData(); } let obj = this.townSwagePlantList.find((item) => item.acode == this.form.assetCode ); let names =val == 1 ? this.form.queryTimeDay : moment(this.form.queryTimeDay).format('yyyy-MM') + '月'; if (obj) {this.handelDownload(obj, names, val); } }, // 下載xls/zip文件 handelDownload(obj, names, val) { let fileName = obj.aname + '設(shè)備運(yùn)行記錄表' + names + '導(dǎo)出數(shù)據(jù)'; let newName = val == 1 ? '.xls' : '.zip'; this.$confirm(`此操作將下載'${fileName}${newName}' 文件, 是否繼續(xù)?`,'提示',{ confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning',} ).then(() => { const datas = { type: val, ...this.form, }; this.$api.reportManagement.exportDeviceState(datas).then((res) => { val == 1 ? downloadXls(res, fileName) : downloadZip(res, fileName); });}).catch(() => { this.$message({ type: 'info', message: `已取消下載${names}數(shù)據(jù)`, });}); }, // 判斷是否顯示編輯按鈕 ifShowEdit(row) { let cloneRow = cloneDeep(row); let arr = []; let keys = Object.keys(cloneRow); for (let i = 0; i < keys.length; i++) {if (!cloneRow[keys[i]]) { arr.push(keys[i]);} } return arr.length > 0 ? true : false; }, // 判斷當(dāng)前時(shí)間是否會(huì)顯示編輯按鈕 compareTime(val) { let current = moment(new Date()).valueOf(); let time = moment(val.time).valueOf(); return time < current ? true : false; }, // 點(diǎn)擊編輯按鈕 handleClickEdit(index, row) { if (this.queryTime !== this.form.queryTimeDay ||this.assetCode !== this.form.assetCode ) {this.$message.warning('查詢條件和列表數(shù)據(jù)不一致，不可編輯！');return false; } this.$set(row, 'isEdit', true); // 當(dāng)type=2時(shí)，部分可編輯 if (this.type == 2) {this.$set(row, 'editProp', []);let keys = Object.keys(row);for (let i = 0; i < keys.length; i++) { if (!row[keys[i]]) { row.editProp.push(keys[i]); }} } }, // 點(diǎn)擊保存按鈕 handleClickSaveRow(index, row) { console.log(index, row); let arr = this.multSaveIndexArr(); if (arr.length > 1) {this.$confirm('當(dāng)前頁面存在多條數(shù)據(jù)需要保存, 是否繼續(xù)?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning',}) .then(() => { let times = 0; arr.map((i) => { this.$set(this.tableData[i], 'isEdit', false); let editRow = cloneDeep(this.tableData[i]); if (this.type == 2) {delete editRow.editProp; } delete editRow.isEdit; this.$set(editRow, 'acquisitionTime', editRow.time); delete editRow.time; this.$api.reportManagement[editRow.id ? 'editDeviceData' : 'addDeviceData' ](editRow.id ? editRow : this.getAddRow(editRow)).then(() => {times++;if (times == arr.length) { this.$message.success('編輯成功'); this.getTableData();} }); }); }) .catch(() => { this.$message({ type: 'info', message: '已取消', }); }); } else {this.$set(row, 'isEdit', false);if (this.type == 2) { delete row.editProp;}let editRow = cloneDeep(row);delete editRow.isEdit;delete editRow.time;this.$set(editRow, 'acquisitionTime', row.time);if (editRow.id) { this.editEvent(editRow);} else { let addRow = this.getAddRow(editRow); console.log('addRow', addRow); this.addEvent(addRow);} } }, //獲取新增數(shù)據(jù) getAddRow(row) { this.$set(row, 'acode', this.assetCode); this.$set(row, 'aname', this.assetName); return row; }, // 單條數(shù)據(jù)-新增事件 addEvent(form) { this.$api.reportManagement.addDeviceData(form).then((res) => {if (res.code == 200) { this.$message.success('編輯成功'); this.getTableData();} else { this.$message.error(res.msg);} }); }, // 單條數(shù)據(jù)-編輯事件 editEvent(form) { console.log('form', form); this.$api.reportManagement.editDeviceData(form).then((res) => {if (res.code == 200) { this.$message.success('編輯成功'); this.getTableData();} else { this.$message.error(res.msg);} }); }, // 判斷當(dāng)前是否有多個(gè)保存的需求 multSaveIndexArr() { let arr = []; this.tableData.map((item, index) => {if (item.isEdit) { arr.push(index);} }); return arr; }, // 轉(zhuǎn)換狀態(tài) formatStatus(val) { if (val) {let obj = this.options.find((item) => item.value == val);return obj ? obj.label : ''; } else {return val; } }, },};</script><style lang='less'>@import '../../../../assets/css/element-ui.less';.deviceRunReport-template { width: 100%; height: 100%; .date_item { margin: 0 20px 0 24px; } .table { height: 100%; .slantTableStyle { width: 100%; height: 100%; .appendTable {box-sizing: border-box;padding: 12px; } .el-table {.el-table__header { position: relative;}.el-table__append-wrapper { width: var(--tableWidth);}.el-table__body-wrapper { overflow: auto;}thead { &::before { width: var(--slantOneColWidth); height: 100%; position: absolute; top: 0; left: 0; display: block; content: ''; z-index: 1; box-sizing: border-box; background-image: linear-gradient( to bottom left, transparent 49.5%, @tableBorder, transparent 50.5% ); } &.is-group tr:first-of-type th:first-of-type { border-bottom: none; }} } } }}</style>

下面是js代碼

/** * 工藝運(yùn)行記錄表表頭 */export const craftRunReportHead = { 1: [ { name: '巡視時(shí)間', prop: 'time', }, { name: '污水處理量', columns: [{ name: '進(jìn)水瞬時(shí) 流量m3/h', prop: 'inInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inInstantFlow2', rule: 'isFloat', }, ],},{ name: '出水瞬時(shí) 流量m3/h', prop: 'outInstantFlow', rule: 'isFloat',},{ name: '內(nèi)回流瞬時(shí) 流量m3/h', prop: 'inGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inGyrusInstantFlow2', rule: 'isFloat', }, ],},{ name: '外回流瞬時(shí) 流量m3/h', prop: 'exGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'exGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'exGyrusInstantFlow2', rule: 'isFloat', }, ],}, ], }, { name: 'PH值', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inPh', rule: 'isFloat', }, { name: '出水', prop: 'outPh', rule: 'isFloat', }, ],}, ], }, { name: 'COD mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inCod', rule: 'isFloat', }, { name: '出水', prop: 'outCod', rule: 'isFloat', }, ],}, ], }, { name: '氨氮mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inNh3n', rule: 'isFloat', }, { name: '出水', prop: 'outNh3n', rule: 'isFloat', }, ],}, ], }, { name: '總磷mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inTp', rule: 'isFloat', }, { name: '出水', prop: 'outTp', rule: 'isFloat', }, ],}, ], }, { name: '總氮mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inTn', rule: 'isFloat', }, { name: '出水', prop: 'outTn', rule: 'isFloat', }, ],}, ], }, { name: 'DO儀表mg/L', columns: [{ name: '厭氧池', columns: [ { name: '1#系列', prop: 'anaerobicTank1', rule: 'isFloat', }, { name: '2#系列', prop: 'anaerobicTank2', rule: 'isFloat', }, ],},{ name: '缺氧池', columns: [ { name: '1#系列', prop: 'anoxicPool1', rule: 'isFloat', }, { name: '2#系列', prop: 'anoxicPool2', rule: 'isFloat', }, ],},{ name: '1#好氧池', columns: [ { name: '前端', prop: 'aerobicTank1Before', rule: 'isFloat', }, { name: '后端', prop: 'aerobicTank1After', rule: 'isFloat', }, ],},{ name: '2#好氧池', columns: [ { name: '前端', prop: 'aerobicTank2Before', rule: 'isFloat', }, { name: '后端', prop: 'aerobicTank2After', rule: 'isFloat', }, ],}, ], }, { name: 'ORP儀表', columns: [{ name: 'mv', columns: [ { name: '厭氧池', prop: 'orpAnaerobicPool', rule: 'isFloat', }, ],},{ name: 'mv', columns: [ { name: '1#好氧池', prop: 'orpAerobicPool1', rule: 'isFloat', }, ],},{ name: 'mv', columns: [ { name: '2#好氧池', prop: 'orpAerobicPool2', rule: 'isFloat', }, ],}, ], }, { name: 'MLSS (污泥濃度)', columns: [{ name: 'mg/L', columns: [ { name: '1#好氧池', prop: 'mlss1', rule: 'isFloat', }, ],},{ name: 'mg/L', columns: [ { name: '2#好氧池', prop: 'mlss2', rule: 'isFloat', }, ],}, ], }, { name: 'SV30（2-4次/天）', columns: [{ name: '%', columns: [ { name: '1#好氧池', prop: 'sv30One', rule: 'isFloat', }, ],},{ name: '%', columns: [ { name: '2#好氧池', prop: 'sv30Two', rule: 'isFloat', }, ],}, ], }, { name: '進(jìn)水溫度/鹽度', prop: 'inTemOrSal', rule: 'isFloat', }, ], 2: [ { name: '巡視時(shí)間', prop: 'time', }, { name: '污水處理量', columns: [{ name: '進(jìn)水瞬時(shí) 流量m3/h', prop: 'inInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inInstantFlow2', rule: 'isFloat', }, ],},{ name: '出水瞬時(shí) 流量m3/h', prop: 'outInstantFlow', rule: 'isFloat',},{ name: '內(nèi)回流瞬時(shí) 流量m3/h', prop: 'inGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inGyrusInstantFlow2', rule: 'isFloat', }, ],},{ name: '外回流瞬時(shí) 流量m3/h', prop: 'exGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'exGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'exGyrusInstantFlow2', rule: 'isFloat', }, ],}, ], }, { name: 'PH值', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inPh', rule: 'isFloat', }, { name: '出水', prop: 'outPh', rule: 'isFloat', }, ],}, ], }, { name: 'COD mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inCod', rule: 'isFloat', }, { name: '出水', prop: 'outCod', rule: 'isFloat', }, ],}, ], }, { name: '氨氮mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inNh3n', rule: 'isFloat', }, { name: '出水', prop: 'outNh3n', rule: 'isFloat', }, ],}, ], }, { name: '總磷mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inTp', rule: 'isFloat', }, { name: '出水', prop: 'outTp', rule: 'isFloat', }, ],}, ], }, { name: '總氮mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inTn', rule: 'isFloat', }, { name: '出水', prop: 'outTn', rule: 'isFloat', }, ],}, ], }, { name: 'DO儀表mg/L', columns: [{ name: '厭氧池', columns: [ { name: '1#系列', prop: 'anaerobicTank1', rule: 'isFloat', }, { name: '2#系列', prop: 'anaerobicTank2', rule: 'isFloat', }, ],},{ name: '缺氧池', columns: [ { name: '1#系列', prop: 'anoxicPool1', rule: 'isFloat', }, { name: '2#系列', prop: 'anoxicPool2', rule: 'isFloat', }, ],},{ name: '1#好氧池', columns: [ { name: '前端', prop: 'aerobicTank1Before', rule: 'isFloat', }, { name: '后端', prop: 'aerobicTank1After', rule: 'isFloat', }, ],},{ name: '2#好氧池', columns: [ { name: '前端', prop: 'aerobicTank2Before', rule: 'isFloat', }, { name: '后端', prop: 'aerobicTank2After', rule: 'isFloat', }, ],}, ], }, { name: 'MLSS (污泥濃度)', columns: [{ name: 'mg/L', columns: [ { name: '1#好氧池', prop: 'mlss1', rule: 'isFloat', }, ],},{ name: 'mg/L', columns: [ { name: '2#好氧池', prop: 'mlss2', rule: 'isFloat', }, ],}, ], }, { name: 'SV30（2-4次/天）', columns: [{ name: '%', columns: [ { name: '1#好氧池', prop: 'sv30One', rule: 'isFloat', }, ],},{ name: '%', columns: [ { name: '2#好氧池', prop: 'sv30Two', rule: 'isFloat', }, ],}, ], }, { name: '二沉池泥水界面儀', columns: [{ name: 'm', columns: [ { name: '1#二沉池', prop: 'sedimentationTank1', rule: 'isFloat', }, ],},{ name: 'm', columns: [ { name: '2#二沉池', prop: 'sedimentationTank2', rule: 'isFloat', }, ],}, ], }, { name: '進(jìn)水溫度/鹽度', prop: 'inTemOrSal', rule: 'isFloat', }, ], // 其他水廠 3: [ { name: '巡視時(shí)間', prop: 'time', }, { name: '污水處理量', columns: [{ name: '進(jìn)水瞬時(shí) 流量m3/h', prop: 'inInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inInstantFlow2', rule: 'isFloat', }, ],},{ name: '出水瞬時(shí) 流量m3/h', prop: 'outInstantFlow', rule: 'isFloat',},{ name: '內(nèi)回流瞬時(shí) 流量m3/h', prop: 'inGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inGyrusInstantFlow2', rule: 'isFloat', }, ],},{ name: '外回流瞬時(shí) 流量m3/h', prop: 'exGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'exGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'exGyrusInstantFlow2', rule: 'isFloat', }, ],}, ], }, { name: 'PH值', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inPh', rule: 'isFloat', }, { name: '出水', prop: 'outPh', rule: 'isFloat', }, ],}, ], }, { name: 'COD mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inCod', rule: 'isFloat', }, { name: '出水', prop: 'outCod', rule: 'isFloat', }, ],}, ], }, { name: '氨氮mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inNh3n', rule: 'isFloat', }, { name: '出水', prop: 'outNh3n', rule: 'isFloat', }, ],}, ], }, { name: '總磷mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inTp', rule: 'isFloat', }, { name: '出水', prop: 'outTp', rule: 'isFloat', }, ],}, ], }, { name: '總氮mg/L', columns: [{ columns: [ { name: '進(jìn)水', prop: 'inTn', rule: 'isFloat', }, { name: '出水', prop: 'outTn', rule: 'isFloat', }, ],}, ], }, { name: 'DO儀表mg/L', columns: [{ name: '厭氧池', columns: [ { name: '1#系列', prop: 'anaerobicTank1', rule: 'isFloat', }, { name: '2#系列', prop: 'anaerobicTank2', rule: 'isFloat', }, ],},{ name: '缺氧池', columns: [ { name: '1#系列', prop: 'anoxicPool1', rule: 'isFloat', }, { name: '2#系列', prop: 'anoxicPool2', rule: 'isFloat', }, ],},{ name: '1#好氧池', columns: [ { name: '前端', prop: 'aerobicTank1Before', rule: 'isFloat', }, { name: '后端', prop: 'aerobicTank1After', rule: 'isFloat', }, ],},{ name: '2#好氧池', columns: [ { name: '前端', prop: 'aerobicTank2Before', rule: 'isFloat', }, { name: '后端', prop: 'aerobicTank2After', rule: 'isFloat', }, ],}, ], }, { name: 'MLSS (污泥濃度)', columns: [{ name: 'mg/L', columns: [ { name: '1#好氧池', prop: 'mlss1', rule: 'isFloat', }, ],},{ name: 'mg/L', columns: [ { name: '2#好氧池', prop: 'mlss2', rule: 'isFloat', }, ],}, ], }, { name: 'SV30（2-4次/天）', columns: [{ name: '%', columns: [ { name: '1#好氧池', prop: 'sv30One', rule: 'isFloat', }, ],},{ name: '%', columns: [ { name: '2#好氧池', prop: 'sv30Two', rule: 'isFloat', }, ],}, ], }, { name: '二沉池泥水界面儀', columns: [{ name: 'm', columns: [ { name: '1#二沉池', prop: 'sedimentationTank1', rule: 'isFloat', }, ],},{ name: 'm', columns: [ { name: '2#二沉池', prop: 'sedimentationTank2', rule: 'isFloat', }, ],},{ name: 'm', columns: [ { name: '3#二沉池', prop: 'sedimentationTank3', rule: 'isFloat', }, ],},{ name: 'm', columns: [ { name: '4#二沉池', prop: 'sedimentationTank4', rule: 'isFloat', }, ],}, ], }, { name: '進(jìn)水溫度/鹽度', prop: 'inTemOrSal', rule: 'isFloat', }, ],};

到此這篇關(guān)于el-table 動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法的文章就介紹到這了,更多相關(guān)el-table 動(dòng)態(tài)合并不定項(xiàng)表頭內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！