电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

el-table?動態合并不定項多級表頭的方法

瀏覽:14日期:2022-06-12 17:14:37

我們的需求是根據不同的廠配不同的多級表頭,每個表頭有需要合并的項,并且不確定

如圖所示

對表格進行循環操作,此處不贅述,最下方有全部代碼

表頭是單獨寫在js方便后期更改,然后引入js文件,然后根據情況去調取

// 獲取表頭 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 = ['紫外線殺菌裝置', '除臭系統']; // 需要合并的表頭名稱數組 } else if (nv == 'zgjn-H WS 0105') {//xx污水處理廠this.tableHeader = deviceRunReportHead[3];this.headerRow2 = ['紫外線殺菌裝置', '除臭系統']; // 需要合并的表頭名稱數組 } else {// 其他廠this.tableHeader = deviceRunReportHead[3]; } // 刷新表格樣式 this.$nextTick(() => {this.$refs.slantTable.doLayout();this.getTableDom(); }); this.keyIndex++; // 此處是重點,更新完表頭之后必須強制刷新表格,否則上一次合并的信息會影響此次合并,keyIndex在el-table的key上, },

以下是合并方法

//表頭樣式設置,將“紫外線殺菌裝置”字段設置為行高2(默認是行高1),并將其所占行偏移的部分設置為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) { // 最后一層是沒有name的即沒有label,則取消合并return { display: 'none' }; } },

下方是全部vue代碼

<!-- 設備運行記錄表 --><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='城鎮污水處理廠'> <el-select v-model='form.assetCode' placeholder='請選擇城鎮污水處理廠' > <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' >按日導出</el-button><el-button icon='el-icon-download' @click='onExport(2)' v-if='type == 1' size='mini' type='primary' >按月導出</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='請選擇'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='請選擇' 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='請選擇' 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、正常運行:√; 2、故障:×;3、備用停機:△;4、其他:開機時間或停機時間等情況請填寫備注欄 </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 - 不可編輯,僅展示,默認值是1; // 2 - 空白處可編輯,保存后已填入部分不可編輯,單行無空白不出現任何按鈕; // 3 - 除部分固定字段外數據可編輯,出現按鈕 type: { type: Number, default: 1, }, }, filters: {}, data() { return { //查詢參數 form: {queryTimeDay: moment().format('yyyy-MM-DD'),assetCode: '', }, Loading: false, // 城鎮污水廠列表 townSwagePlantList: [], //表格數據 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(); }, // 查詢城鎮污水廠列表 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 = ['紫外線殺菌裝置', '除臭系統']; // 需要合并的表頭 } else if (nv == 'zgjn-H WS 0105') {// xx污水處理廠this.tableHeader = deviceRunReportHead[3];this.headerRow2 = ['紫外線殺菌裝置', '除臭系統']; // 需要合并的表頭 } else {// 其他廠this.tableHeader = deviceRunReportHead[3]; } // 刷新表格樣式 this.$nextTick(() => {this.$refs.slantTable.doLayout();this.getTableDom(); }); this.keyIndex++; }, //查詢表格數據 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(); }); }, // 時間轉換 formatTime(val) { return moment(val).format('HH:mm'); }, //獲取table的DOM元素,篩查出el-table__header的DOM,并獲取其寬度,用以控制append部分的寬度設置 getTableDom() { let slantTable = this.$refs.slantTable; let tableDom = slantTable.$children.find((el) => el.$el.className == 'el-table__header' ); this.tableWidth = tableDom.table.bodyWidth; }, //表頭樣式設置,將“紫外線殺菌裝置”字段設置為行高2(默認是行高1),并將其所占行偏移的部分設置為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' }; } }, // 點擊導出按鈕 onExport(val) { if (this.form.assetCode == '' || this.form.queryTimeDay == '') {this.$message.warning('請選擇日期和污水廠后再進行導出');return; } let flag = JSON.stringify(this.form) == JSON.stringify(this.startForm); // 按日導出重新搜索列表 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 + '設備運行記錄表' + names + '導出數據'; let newName = val == 1 ? '.xls' : '.zip'; this.$confirm(`此操作將下載'${fileName}${newName}' 文件, 是否繼續?`,'提示',{ 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}數據`, });}); }, // 判斷是否顯示編輯按鈕 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; }, // 判斷當前時間是否會顯示編輯按鈕 compareTime(val) { let current = moment(new Date()).valueOf(); let time = moment(val.time).valueOf(); return time < current ? true : false; }, // 點擊編輯按鈕 handleClickEdit(index, row) { if (this.queryTime !== this.form.queryTimeDay ||this.assetCode !== this.form.assetCode ) {this.$message.warning('查詢條件和列表數據不一致,不可編輯!');return false; } this.$set(row, 'isEdit', true); // 當type=2時,部分可編輯 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]); }} } }, // 點擊保存按鈕 handleClickSaveRow(index, row) { console.log(index, row); let arr = this.multSaveIndexArr(); if (arr.length > 1) {this.$confirm('當前頁面存在多條數據需要保存, 是否繼續?', '提示', { 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);} } }, //獲取新增數據 getAddRow(row) { this.$set(row, 'acode', this.assetCode); this.$set(row, 'aname', this.assetName); return row; }, // 單條數據-新增事件 addEvent(form) { this.$api.reportManagement.addDeviceData(form).then((res) => {if (res.code == 200) { this.$message.success('編輯成功'); this.getTableData();} else { this.$message.error(res.msg);} }); }, // 單條數據-編輯事件 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);} }); }, // 判斷當前是否有多個保存的需求 multSaveIndexArr() { let arr = []; this.tableData.map((item, index) => {if (item.isEdit) { arr.push(index);} }); return arr; }, // 轉換狀態 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代碼

/** * 工藝運行記錄表表頭 */export const craftRunReportHead = { 1: [ { name: '巡視時間', prop: 'time', }, { name: '污水處理量', columns: [{ name: '進水瞬時 流量m3/h', prop: 'inInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inInstantFlow2', rule: 'isFloat', }, ],},{ name: '出水瞬時 流量m3/h', prop: 'outInstantFlow', rule: 'isFloat',},{ name: '內回流瞬時 流量m3/h', prop: 'inGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inGyrusInstantFlow2', rule: 'isFloat', }, ],},{ name: '外回流瞬時 流量m3/h', prop: 'exGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'exGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'exGyrusInstantFlow2', rule: 'isFloat', }, ],}, ], }, { name: 'PH值', columns: [{ columns: [ { name: '進水', prop: 'inPh', rule: 'isFloat', }, { name: '出水', prop: 'outPh', rule: 'isFloat', }, ],}, ], }, { name: 'COD mg/L', columns: [{ columns: [ { name: '進水', prop: 'inCod', rule: 'isFloat', }, { name: '出水', prop: 'outCod', rule: 'isFloat', }, ],}, ], }, { name: '氨氮mg/L', columns: [{ columns: [ { name: '進水', prop: 'inNh3n', rule: 'isFloat', }, { name: '出水', prop: 'outNh3n', rule: 'isFloat', }, ],}, ], }, { name: '總磷mg/L', columns: [{ columns: [ { name: '進水', prop: 'inTp', rule: 'isFloat', }, { name: '出水', prop: 'outTp', rule: 'isFloat', }, ],}, ], }, { name: '總氮mg/L', columns: [{ columns: [ { name: '進水', 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: '進水溫度/鹽度', prop: 'inTemOrSal', rule: 'isFloat', }, ], 2: [ { name: '巡視時間', prop: 'time', }, { name: '污水處理量', columns: [{ name: '進水瞬時 流量m3/h', prop: 'inInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inInstantFlow2', rule: 'isFloat', }, ],},{ name: '出水瞬時 流量m3/h', prop: 'outInstantFlow', rule: 'isFloat',},{ name: '內回流瞬時 流量m3/h', prop: 'inGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inGyrusInstantFlow2', rule: 'isFloat', }, ],},{ name: '外回流瞬時 流量m3/h', prop: 'exGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'exGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'exGyrusInstantFlow2', rule: 'isFloat', }, ],}, ], }, { name: 'PH值', columns: [{ columns: [ { name: '進水', prop: 'inPh', rule: 'isFloat', }, { name: '出水', prop: 'outPh', rule: 'isFloat', }, ],}, ], }, { name: 'COD mg/L', columns: [{ columns: [ { name: '進水', prop: 'inCod', rule: 'isFloat', }, { name: '出水', prop: 'outCod', rule: 'isFloat', }, ],}, ], }, { name: '氨氮mg/L', columns: [{ columns: [ { name: '進水', prop: 'inNh3n', rule: 'isFloat', }, { name: '出水', prop: 'outNh3n', rule: 'isFloat', }, ],}, ], }, { name: '總磷mg/L', columns: [{ columns: [ { name: '進水', prop: 'inTp', rule: 'isFloat', }, { name: '出水', prop: 'outTp', rule: 'isFloat', }, ],}, ], }, { name: '總氮mg/L', columns: [{ columns: [ { name: '進水', 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: '進水溫度/鹽度', prop: 'inTemOrSal', rule: 'isFloat', }, ], // 其他水廠 3: [ { name: '巡視時間', prop: 'time', }, { name: '污水處理量', columns: [{ name: '進水瞬時 流量m3/h', prop: 'inInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inInstantFlow2', rule: 'isFloat', }, ],},{ name: '出水瞬時 流量m3/h', prop: 'outInstantFlow', rule: 'isFloat',},{ name: '內回流瞬時 流量m3/h', prop: 'inGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'inGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'inGyrusInstantFlow2', rule: 'isFloat', }, ],},{ name: '外回流瞬時 流量m3/h', prop: 'exGyrusInstantFlow', rule: 'isFloat', columns: [ { name: '1#系列', prop: 'exGyrusInstantFlow1', rule: 'isFloat', }, { name: '2#系列', prop: 'exGyrusInstantFlow2', rule: 'isFloat', }, ],}, ], }, { name: 'PH值', columns: [{ columns: [ { name: '進水', prop: 'inPh', rule: 'isFloat', }, { name: '出水', prop: 'outPh', rule: 'isFloat', }, ],}, ], }, { name: 'COD mg/L', columns: [{ columns: [ { name: '進水', prop: 'inCod', rule: 'isFloat', }, { name: '出水', prop: 'outCod', rule: 'isFloat', }, ],}, ], }, { name: '氨氮mg/L', columns: [{ columns: [ { name: '進水', prop: 'inNh3n', rule: 'isFloat', }, { name: '出水', prop: 'outNh3n', rule: 'isFloat', }, ],}, ], }, { name: '總磷mg/L', columns: [{ columns: [ { name: '進水', prop: 'inTp', rule: 'isFloat', }, { name: '出水', prop: 'outTp', rule: 'isFloat', }, ],}, ], }, { name: '總氮mg/L', columns: [{ columns: [ { name: '進水', 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: '進水溫度/鹽度', prop: 'inTemOrSal', rule: 'isFloat', }, ],};

到此這篇關于el-table 動態合并不定項多級表頭的方法的文章就介紹到這了,更多相關el-table 動態合并不定項表頭內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: JavaScript
主站蜘蛛池模板: PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 | SF6环境监测系统-接地环流在线监测装置-瑟恩实业 | 校园气象站_超声波气象站_农业气象站_雨量监测站_风途科技 | 郑州水质检测中心_井水检测_河南废气检测_河南中环嘉创检测 | 北京环球北美考试院【官方网站】|北京托福培训班|北京托福培训 | 德国进口电锅炉_商用电热水器_壁挂炉_电采暖器_电热锅炉[德国宝] | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 铣床|万能铣床|立式铣床|数控铣床|山东滕州万友机床有限公司 | 地源热泵一体机,地源热泵厂家-淄博汇能环保设备有限公司 | 食品级焦亚硫酸钠_工业级焦亚硫酸钠_焦亚硫酸钠-潍坊邦华化工有限公司 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 中医中药治疗血小板减少-石家庄血液病肿瘤门诊部 | 杭州门窗厂家_阳光房_包阳台安装电话-杭州窗猫铝合金门窗 | 合肥废气治理设备_安徽除尘设备_工业废气处理设备厂家-盈凯环保 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 冷却塔降噪隔音_冷却塔噪声治理_冷却塔噪音处理厂家-广东康明冷却塔降噪厂家 | 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | 新型游乐设备,360大摆锤游乐设备「诚信厂家」-山东方鑫游乐设备 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 金环宇|金环宇电线|金环宇电缆|金环宇电线电缆|深圳市金环宇电线电缆有限公司|金环宇电缆集团 | 伺服电机_直流伺服_交流伺服_DD马达_拓达官方网站 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 多功能干燥机,过滤洗涤干燥三合一设备-无锡市张华医药设备有限公司 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 铁素体测量仪/检测仪/铁素体含量测试仪-苏州圣光仪器有限公司 | 水上浮桥-游艇码头-浮动码头-游船码头-码瑞纳游艇码头工程 | 桑茶-七彩贝壳桑叶茶 长寿茶 | 气弹簧定制-气动杆-可控气弹簧-不锈钢阻尼器-工业气弹簧-可调节气弹簧厂家-常州巨腾气弹簧供应商 | 淘趣英语网 - 在线英语学习,零基础英语学习网站 | 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 长沙广告公司|长沙广告制作设计|长沙led灯箱招牌制作找望城湖南锦蓝广告装饰工程有限公司 | 冷凝锅炉_燃气锅炉_工业燃气锅炉改造厂家-北京科诺锅炉 | 净化工程_无尘车间_无尘车间装修-广州科凌净化工程有限公司 | 盘古网络技术有限公司| 定量包装秤,吨袋包装称,伸缩溜管,全自动包装秤,码垛机器人,无锡市邦尧机械工程有限公司 | 乳化沥青设备_改性沥青设备_沥青加温罐_德州市昊通路桥工程有限公司 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | MVE振动电机_MVE震动电机_MVE卧式振打电机-河南新乡德诚生产厂家 | 煤粉取样器-射油器-便携式等速飞灰取样器-连灵动 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 无锡市珂妮日用化妆品有限公司|珂妮日化官网|洗手液厂家 | 真空吸污车_高压清洗车厂家-程力专用汽车股份有限公司官网 |