IT俱乐部 JavaScript el-table 动态合并不定项多级表头的方法

el-table 动态合并不定项多级表头的方法

发布: 2023年 7月 20日 327阅读

我们的需求是根据不同的厂配不同的多级表头,每个表头有需要合并的项,并且不确定

如图所示

对表格进行循环操作,此处不赘述,最下方有全部代码

表头是单独写在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 动态合并不定项表头内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/8543.html
32赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部