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>