element表格合並列

需求：我們在做指標打分時，會一級指標下面有多個二級指標，我們在做表格時需要把一級指標合並

如圖：

 

 js代碼：

 

 html綁定一個element內置方法

 

 js的方法

 

 

完整代碼：

<template>
  <!-- 全部匯總結果 -->
  <div style="width:100%;height: calc(100% - 110px);" id="group9_allResult">
    <div class="tableList" style="height: calc(100% - 0px);" v-if="sendChild.tabFlag ==='R'" key="007">
      <el-table border :data="tableDataList" :span-method="objectSpanMethod" v-loading="loading">
        <el-table-column :label="indexLayerNameP" min-width="160" align="left" prop="firstColumn" show-overflow-tooltip></el-table-column>
        <el-table-column :label="indexLayerNameLast" min-width="160" align="center" prop="secondColumn" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="220" v-for="(ele,index) in tableTitleList" :label="ele.orgName" :prop="'S'+ele.id" align="center" show-overflow-tooltip :key="index">
          <el-table-column min-width="110" label="分數" :prop="'S'+ele.id" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column min-width="110" label="備注" :prop="'SREMARK'+ele.id"  align="center" show-overflow-tooltip></el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="tableList" style="height: calc(100% - 0px);" v-else-if="sendChild.tabFlag ==='S'" key="009">
      <el-table show-summary border :data="tableDataList" :span-method="objectSpanMethod" v-loading="loading" :summary-method="getSummaries">
        <el-table-column :label="indexLayerNameP" min-width="160" align="left" prop="firstColumn" show-overflow-tooltip></el-table-column>
        <el-table-column :label="indexLayerNameLast" min-width="160" align="center" prop="secondColumn" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="220" v-for="(ele,index) in tableTitleList" :label="ele.orgName" :prop="'S'+ele.id" align="center" show-overflow-tooltip :key="index">
          <el-table-column min-width="110" label="分數" :prop="'S'+ele.id" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column min-width="110" label="備注" :prop="'SREMARK'+ele.id"  align="center" show-overflow-tooltip></el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="tableList" style="height: calc(100% - 0px);" v-else key="008">
      <el-table show-summary border :data="tableDataList" :span-method="objectSpanMethod" v-loading="loading" :summary-method="getSummaries1">
        <el-table-column :label="indexLayerNameP" min-width="160" align="left" prop="firstColumn" show-overflow-tooltip></el-table-column>
        <el-table-column :label="indexLayerNameLast" min-width="160" align="center" prop="secondColumn" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="160" v-for="(ele,i) in tableTitleList" :label="ele.orgName" :prop="'S'+ele.id" align="center" show-overflow-tooltip :key="i">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import RequestUrl from "../../reqUrl.js";
  import elTable from "@/components/fix/table";
  export default {
    mixins: [RequestUrl],
    props: {
      sendChild: {}
    },
    components: {
      elTable
    },
    data() {
      return {
        Remarks:[
          {name:"這是2"},
          // {name:"這是3"},
          // {name:"這是4"},
          // {name:"這是5"},
        ],
        Fraction:[
          {score:"18"},
          // {name:"這是3"},
          // {name:"這是4"},
          // {name:"這是5"},
        ],
        loading: false,
        tableTitleList: [],
        tableDataList: [],
        tableShow: false,
        indexLayerNameP: "上級指標名稱",
        indexLayerNameLast: "扣分標准",
        // 1
        spanArr1: [],
        pos1: 0, // spanArr 的索引
        // 2
        spanArr2: [],
        pos2: 0, // spanArr 的索引
        assessmentId:"",
        data:[{
          assessmentId: "391956387819885568",
          assessmentOrgCode: null,
          assessmentType: null,
          branchOffice: "001",
          branchOfficeName: "微服務一組",
          listdata:[{
            name:"備注",
            id:"391956387819885568"
          }],
          scoredata:[{
            name:"備注",
            id:"391956387819885568"
          }],
        },
        ],
      };
    },
    mounted() {
        this.assessmentId = sessionStorage.getItem("assessmentId");
      this.getObjectList();
      this.getFormData();
      this.getAssessmentIndexLayerName();
    },
    methods: {
      getSummaries(param){
      const {columns,data} = param;
      const sums = []
      columns.forEach((column,index)=>{
        // console.log("返回結果",columns,column,data)
        switch (index) {
          case 0:
            sums[index]='總計'
            break;
          case 1:
            sums[index]==''
            break;
          default:
            if(column.label == "備注"){
              sums[index]==''
            }else{
              const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                      return prev + curr;
                    } else {
                      return prev;
                    }
                  }, 0);
                  sums[index] += '';
                } else {
                  sums[index] = 'N/A';
                }
            }
          }
        })
        return sums;
      },
      getSummaries1(param){
      const {columns,data} = param;
      const sums = []
      columns.forEach((column,index)=>{
        // console.log("返回結果",columns,column,data)
        switch (index) {
          case 0:
            sums[index]='總計'
            break;
          case 1:
            sums[index]==''
            break;
          default:
              const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                      return prev + curr;
                    } else {
                      return prev;
                    }
                  }, 0);
                  sums[index] += '';
                } else {
                  sums[index] = 'N/A';
                }
            }
        })
        return sums;
      },
      getAssessmentIndexLayerName() {
        let _this = this;
        _this.$http.post(_this.getAssessmentIndexLevel_null, {
          id: this.assessmentId
        }).then(function(res) {
          if(!res.data.success) {
            _this.$message({
              message: "查詢指標層級名失敗!",
              type: "error"
            });
            return;
          }
          let layerNameData = res.data.data;
          if(layerNameData.layerNameP) {
            _this.indexLayerNameP = layerNameData.layerNameP;
          }
          if(layerNameData.layerName) {
            _this.indexLayerNameLast = layerNameData.layerName;
          }
        }, function(error) {
          _this.$message({
            message: "查詢指標層級名失敗！",
            type: "error"
          });
        });
      },
      getObjectList() {
        // var flag = this.$publics.getSystemSignal(); //黨建雲 false 多租戶 true
        // var url = "/party/assessment/Assessment/Object/findAssessmentObjectList";
        // var urlxf = "/party/assessment/XfAssessment/Object/findAssessmentObjectList";
        var obj = {
            branchOffice: this.sendChild.branchOffice,
          assessmentId: this.assessmentId
        }
        this.$publics._getPublicMethod(this.getAssessmentObjList_null, obj).then(getData => {
            this.tableTitleList = getData;
          })

        // if(flag) {
        //   this.$publics._getPublicMethod(urlxf, obj).then(getData => {
        //     this.tableTitleList = getData;
        //   })
        // } else {
        //   this.$publics._getPublicMethod(url, obj).then(getData => {
        //     this.tableTitleList = getData;
        //   })
        // }
      },
      getFormData() {
        this.loading = true;
        this.sendChild.isLoading = true;
        console.log("輸出9999",this.sendChild)
        var flag = this.$publics.getSystemSignal(); //黨建雲 false 多租戶 true
        var url = "/party/assessment/Assessment/ResultStatistics/getAssessmentResultStatistics";
        var urlxf = "/party/assessment/XfAssessment/ResultStatistics/getAssessmentResultStatistics";
        //scoreType 四個tab頁傳不同參數  匯總結果 R  自評分 Z  初評分 S 系統評分 X
        var obj = {
          assessmentId: this.assessmentId,
          scoreType: this.sendChild.tabFlag,
          department: this.sendChild.department,
          branchOffice: this.sendChild.branchOffice
        }
        if(flag) {
          this.$publics._getPublicMethod(urlxf, obj).then(getData => {
            console.log("輸出結果",getData)
            if(getData.success){
              this.dealData(getData)
            }else{
              this.loading = false;
              this.$message({
                message: "查詢指標層級名失敗!",
                type: "error"
              });
            return;
            }
          })
        } else {
          this.$publics._getPublicMethod(url, obj).then(getData => {
            console.log("輸出結果1",getData)
            this.dealData(getData)
            // if(getData.success){
            //   this.dealData(getData)
            // }else{
            //   this.loading = false;
            //   this.$message({
            //     message: "查詢指標層級名失敗!",
            //     type: "error"
            //   });
            // }
          })
        }
      },
      dealData(data) {  //請求回來的數據做處理
        this.tableDataList = [];
        data && data.map((el) => {
          let newel = JSON.parse(JSON.stringify(el));
          newel.firstColumn = el.pIndexName;
          newel.secondColumn = el.indexName;
          this.tableDataList.push(newel);
        })
        this.spanArr1 = [];
        this.spanArr2 = [];
        for(var i = 0; i < this.tableDataList.length; i++) {
          if(i === 0) {
            this.spanArr1.push(1);
            this.pos1 = 0;
            this.spanArr2.push(1);
            this.pos2 = 0;
          } else {
            // 判斷當前元素與上一個元素是否相同(第1)
            if(this.tableDataList[i].firstColumn === this.tableDataList[i - 1].firstColumn) {  //那個字段要合並就判斷上一個和下一個的字段是否相同
              this.spanArr1[this.pos1] += 1;   //相同就累加
              this.spanArr1.push(0);
            } else {
              this.spanArr1.push(1);  //
              this.pos1 = i;
            }
          }
        }
        this.loading = false;
        this.sendChild.isLoading = false;
      },
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if(columnIndex === 0) { //第幾列合並判斷
          const _row = this.spanArr1[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    }
  };
</script>
<style>
    #group9_allResult .tableList .el-table{
        overflow: scroll;
    }
    #group9_allResult .el-table__body-wrapper{
        overflow: visible;
        height: auto;
    }
    #group9_allResult .el-table__header-wrapper{
        overflow: visible;
    }
  #group9_allResult .el-table .cell {
    /* white-space: pre-wrap!important; */

    line-height: 24px;
  }
</style>