复杂多表头表格

个人记录不通用

<template>
  <cl-crud @load="onLoad" ref="crud">
    <!-- 表格 -->
    <el-row class="flex-full">
      <div style="">
        <el-table
          class="main-table"
          :data="tableData"
          style="width: 100%"
          :span-method="handleSpanMethod"
        >
          <el-table-column
            label="序号"
            width="80"
            type="index"
          ></el-table-column>
          <!-- 纵向表头 -->
          <el-table-column label="分析对象" prop="targetName" width="180px">
          </el-table-column>
          <el-table-column label="分析单元" prop="name" width="180px">
          </el-table-column>
          <!-- 横向表头和数据列 -->
          <el-table-column label="固有风险等级">
            <el-table-column
              v-if="list.inherentRiskLevelTitle"
              v-for="(item, index) in list.inherentRiskLevelTitle"
              :key="index"
              :prop="'inherentValue' + index"
              :label="item"
            >
            </el-table-column>
            <el-table-column
              v-if="!list.inherentRiskLevelTitle"
              prop="inherentValue"
              :label="item"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="控制风险等级">
            <el-table-column
              v-if="list.controlRiskLevelTitle"
              :prop="'controlValue' + index"
              :label="item"
              v-for="(item, index) in list.controlRiskLevelTitle"
              :key="index"
            >
            </el-table-column>
            <el-table-column
              v-if="!list.controlRiskLevelTitle"
              prop="controlValue"
              label=""
            >
            </el-table-column>
          </el-table-column>
          <!-- 自定义内容插槽 -->
          <template v-slot:append>
            <div
              style="
                width: 100%;
                height: 60px;
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              总风险点合计：{{ list.totalPoint }}
            </div>
          </template>
        </el-table>
      </div>
    </el-row>
  </cl-crud>
</template>
  <script>
export default {
  data() {
    return {
      list: [],
      selectedIds: [],
      queryForm: {},
      tableData: [],
      form: {},
      customData: [],
    };
  },
  mounted() {},
  methods: {
    getTableData(data) {
      // 处理表格数据
      data.rmSclAnalysisRiskList = (data.rmSclAnalysisRiskList || []).map(
        (item) => {
          // 固有
          let inherentList = {};
          (item.inherentRiskPointList || []).map((row, index) => {
            //将inherentRiskPointList里面的每个元素拎出来并赋予prop
            inherentList[`inherentValue` + index] = row;
          });
          // 控制
          let controlList = {};
          (item.controlRiskPointList || []).map((row, index) => {
            controlList[`controlValue` + index] = row;
          });
          return {
            ...item,
            ...inherentList,
            ...controlList,
          };
        }
      );
      this.$set(this, "list", data);
      this.$set(this, "tableData", data.rmSclAnalysisRiskList);
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 处理最后一行的合计合并
      if (rowIndex === this.tableData.length - 1) {
        if (columnIndex === 1)
          return {
            rowspan: 1,
            colspan: 2,
          };
        if (columnIndex === 2)
          return {
            rowspan: 0,
            colspan: 0,
          };
      } else {
        // 处理第二列的相同数据的合并
        // 判断哪一列 如果需要处理多了 使用 || 进行处理即可
        if (columnIndex === 1) {
          const _row = this.flitterDatas(this.tableData).one[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
    },
    /**合并表格的第一列，处理表格数据 */
    flitterDatas(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        // console.log(item, index);
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //注意这里的data是表格绑定的字段，根据自己的需求来改
          if (item.targetName === arr[index - 1].targetName) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
    handleReset() {
      this.$set(this.queryForm, "analyticalMethod", "3");
      this.$refs.crud.refresh({ ...this.queryForm });
    },
  },
};
</script>
  
<style lang="less" scoped>
::v-deep .main-table {
  border-bottom: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;
}
::v-deep .main-table .el-table__cell {
  border: 1px solid #ccc;
}
::v-deep .el-table th {
  /* 表头字体大小 */
  /* font-size: 18px !important; */
}
::v-deep .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  /* 表头颜色 */
  background: #f1f1f1 !important;
}
::v-deep .main-table .cell {
  /* 表格全局字体颜色 */
  /* color: red !important; */
  /* 字体居中 */
  text-align: center;
}
::v-deep .main-table .el-table__empty-block {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
</style>