el-table 动态合并不定项多级表头的方法
- 技术交流
- 2024-10-01 11:09:01
我们的需求是根据不同的厂配不同的多级表头,每个表头有需要合并的项,并且不确定
如图所示
对表格进行循环操作,此处不赘述,最下方有全部代码
表头是单独写在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代码
筛选 按日导出 按月导出 编辑 编辑 保存 填表要求：1、正常运行：√； 2、故障：×；3、备用停机：△；4、其他：开机时间或停机时间等情况请填写备注栏
下面是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 动态合并不定项表头内容请搜索讯客以前的文章或继续浏览下面的相关文章希望大家以后多多支持讯客！
el-table 动态合并不定项多级表头的方法由讯客互联技术交流栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“el-table 动态合并不定项多级表头的方法”
