el-table?動態(tài)合并不定項多級表頭的方法
更新時間：2023年07月13日 11:47:37 作者：神探小白牙
本文主要介紹了el-table?動態(tài)合并不定項多級表頭的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
我們的需求是根據(jù)不同的廠配不同的多級表頭,每個表頭有需要合并的項,并且不確定
如圖所示
對表格進行循環(huán)操作,此處不贅述,最下方有全部代碼
表頭是單獨寫在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++; // 此處是重點,更新完表頭之后必須強制刷新表格,否則上一次合并的信息會影響此次合并,keyIndex在el-table的key上,
},以下是合并方法
//表頭樣式設(shè)置，將“紫外線殺菌裝置”字段設(shè)置為行高2（默認是行高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) { // 最后一層是沒有name的即沒有l(wèi)abel,則取消合并
return { display: "none" };
}
},下方是全部vue代碼
<!-- 設(shè)備運行記錄表 -->
<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"
style="width: 160px"
>
</el-date-picker>
</el-form-item>
<el-form-item label="城鎮(zhèn)污水處理廠">
<el-select
v-model="form.assetCode"
placeholder="請選擇城鎮(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 class="table" slot="tablePage" v-loading="Loading">
<div
class="slantTableStyle"
:style="{
'--slantOneColWidth': tableOneColWidth + 'px',
'--tableWidth': tableWidth,
}"
>
<el-table
:data="tableData"
ref="slantTable"
:header-cell-style="headerStyle"
height="100%"
border
:key="keyIndex"
>
<el-table-column
v-for="(column1, index) in tableHeader"
:key="index"
:label="column1.name"
:align="column1.align ? column1.align : tableAlignDef"
:width="column1.width"
>
<el-table-column
v-for="(column2, index2) in column1.columns"
:key="index2"
:prop="column2.prop"
:label="column2.name"
:align="column2.align ? column2.align : tableAlignDef"
:width="column2.width ? column2.width : tableMinColumnWidth"
>
<el-table-column
v-for="(column3, index3) in column2.columns"
:key="index3"
:prop="column3.prop"
:label="column3.name"
:align="column3.align ? column3.align : tableAlignDef"
:width="tableMinColumnWidth"
>
<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-select
v-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-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(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="操作"
align="center"
width="100"
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、其他：開機時間或停機時間等情況請?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 - 不可編輯，僅展示，默認值是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();
});
},
// 時間轉(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（默認是行高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" };
}
},
// 點擊導(dǎo)出按鈕
onExport(val) {
if (this.form.assetCode == "" || this.form.queryTimeDay == "") {
this.$message.warning("請選擇日期和污水廠后再進行導(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è)備運行記錄表" + 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;
},
// 判斷當前時間是否會顯示編輯按鈕
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("查詢條件和列表數(shù)據(jù)不一致，不可編輯！");
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("當前頁面存在多條數(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);
}
});
},
// 判斷當前是否有多個保存的需求
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代碼
/**
* 工藝運行記錄表表頭
*/
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: "內(nèi)回流瞬時 流量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: "內(nèi)回流瞬時 流量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: "內(nèi)回流瞬時 流量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",
},
],
};到此這篇關(guān)于el-table 動態(tài)合并不定項多級表頭的方法的文章就介紹到這了,更多相關(guān)el-table 動態(tài)合并不定項表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了element-ui 中的table的列隱藏問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
圖片預(yù)覽插件vue-photo-preview的使用示例詳解
這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件的操作方法
這篇文章主要介紹了Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
通過Vue實現(xiàn)Excel文件的上傳和預(yù)覽功能
在業(yè)務(wù)系統(tǒng)中,Excel 文件作為一種常用的數(shù)據(jù)存儲和傳輸格式,經(jīng)常需要被處理和展示,這篇文章將講解如何通過 Vue 和 xlsx.js 實現(xiàn) Excel 文件的上傳和預(yù)覽功能,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了nuxt踩坑之Vuex狀態(tài)樹的模塊方式使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-09-09
Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
在VueRouter中,可以通過動態(tài)路由匹配和查詢參數(shù)`query`來傳遞參數(shù),并將路由參數(shù)或查詢參數(shù)作為組件的`props`傳遞,動態(tài)路由匹配使用`route.params`訪問參數(shù),查詢參數(shù)使用`route.query`訪問,本文給大家介紹Vue Router中獲取路由傳遞過來的參數(shù),感興趣的朋友一起看看吧2025-02-02
Vue-Router路由是根據(jù)不同的url地址展現(xiàn)不同的內(nèi)容或頁面,這篇文章主要給大家介紹了關(guān)于Vue3中如何使用Vue?Router的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細的實例代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
下面小編就為大家分享一篇vue 多入口文件搭建 vue多頁面搭建的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03