我们的需求是根据不同的厂配不同的多级表头,每个表头有需要合并的项,并且不确定
如图所示
对表格进行循环操作,此处不赘述,最下方有全部代码
表头是单独写在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代码
筛选 按日导出 按月导出 {{ disabledProp.includes(column3.prop) ? formatTime(scope.row[column3.prop]) : formatStatus(scope.row[column3.prop]) }} {{ disabledProp.includes(column2.prop) ? formatTime(scope.row[column2.prop]) : formatStatus(scope.row[column2.prop]) }} {{ disabledProp.includes(column1.prop) ? formatTime(scope.row[column1.prop]) : formatStatus(scope.row[column1.prop]) }} 编辑 编辑 保存 填表要求：1、正常运行：√； 2、故障：×；3、备用停机：△；4、其他：开机时间或停机时间等情况请填写备注栏 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 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 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; } }, },};@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; } } } } }}下面是js代码
/** * 工艺运行记录表表头 */export const craftRunReportHead = { 1: [ { name: "巡视时间", prop: "time", }, { name: "污水处理量", columns: [ { name: "进水瞬时 流量m³/h", prop: "inInstantFlow", rule: "isFloat", columns: [ { name: "1#系列", prop: "inInstantFlow1", rule: "isFloat", }, { name: "2#系列", prop: "inInstantFlow2", rule: "isFloat", }, ], }, { name: "出水瞬时 流量m³/h", prop: "outInstantFlow", rule: "isFloat", }, { name: "内回流瞬时 流量m³/h", prop: "inGyrusInstantFlow", rule: "isFloat", columns: [ { name: "1#系列", prop: "inGyrusInstantFlow1", rule: "isFloat", }, { name: "2#系列", prop: "inGyrusInstantFlow2", rule: "isFloat", }, ], }, { name: "外回流瞬时 流量m³/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: "进水瞬时 流量m³/h", prop: "inInstantFlow", rule: "isFloat", columns: [ { name: "1#系列", prop: "inInstantFlow1", rule: "isFloat", }, { name: "2#系列", prop: "inInstantFlow2", rule: "isFloat", }, ], }, { name: "出水瞬时 流量m³/h", prop: "outInstantFlow", rule: "isFloat", }, { name: "内回流瞬时 流量m³/h", prop: "inGyrusInstantFlow", rule: "isFloat", columns: [ { name: "1#系列", prop: "inGyrusInstantFlow1", rule: "isFloat", }, { name: "2#系列", prop: "inGyrusInstantFlow2", rule: "isFloat", }, ], }, { name: "外回流瞬时 流量m³/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: "进水瞬时 流量m³/h", prop: "inInstantFlow", rule: "isFloat", columns: [ { name: "1#系列", prop: "inInstantFlow1", rule: "isFloat", }, { name: "2#系列", prop: "inInstantFlow2", rule: "isFloat", }, ], }, { name: "出水瞬时 流量m³/h", prop: "outInstantFlow", rule: "isFloat", }, { name: "内回流瞬时 流量m³/h", prop: "inGyrusInstantFlow", rule: "isFloat", columns: [ { name: "1#系列", prop: "inGyrusInstantFlow1", rule: "isFloat", }, { name: "2#系列", prop: "inGyrusInstantFlow2", rule: "isFloat", }, ], }, { name: "外回流瞬时 流量m³/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 动态合并不定项表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！