通过配置化实现对el-table列表的部分内容进行操作和展示

一、需求描述：

甲方大大突发奇想，要求在项目中某个列表中的某个部分进行配置化展示，如下图所示：

红框圈出的部分便是要实现配置化的内容。

直入主题，要实现配置化（此处只记录前端相关操作），首先想到的便是通过v-for进行循环实现。在和后端沟通之后，现在主要提供了两个接口：

第一个接口是码表配置，主要用来循环展示表头，通过变量DELIVERY_TEAM_DICT承接；

第二个接口是初始化接口，首次进入页面会把需要进行交付团队评估的人员查询出来。同时，后台把每个人需要入的评估点也初始化到数据里。结构如下所示（在实现过程中通过这种配置化实现有一个缺点，需要后台在每次初始化时按照第一个码表接口评估项的顺序进行排序 ，这样每条数据中的评估项才能对应上码表中的评估项）：

 二、列表内容循环： 

el-table中循环部分代码如下，主要循环了两个部分，第一部分是表格的表头，通过第一个接口返回的码值进行遍历；第二部分是每个团队成员对应的评估分数，其中除了综合得分外其他都提供输入框进行分数的填写。（这里本人还犯了个小错误，在给每个团队成员的每项分数赋值的时候使用$index来进行绑定，这样导致输入一个分数，该行的数据都被填上了。分析过后发现使用外层表头循环的index来进行遍历即可。）

<el-table-column
   v-for="(item,index) in DELIVERY_TEAM_DICT"
   :key="index"
   :label="item.EVALUATE_ITEM_NAME"
   width="180"
   align="left">
     <template slot="header" slot-scope="scope">
         <span class="color-red">*</span>
         <span>{{ item.EVALUATE_ITEM_NAME }}</span>
      </template>
      <template slot-scope="{row,$index}">
         <el-input 
             v-if="row.TEAM_EVALUATE_VALUE_OUT_LIST[index].EVALUATE_VALUE_CODE !== '18'"
             size="mini"
             onkeyup="this.value=this.value.match(/\d+/)"
             onafterpaste="this.value=this.value.match(/\d+/)" 
              @blur.native.capture="blurText($event,row.TEAM_EVALUATE_VALUE_OUT_LIST[index].EVALUATE_ITEM,$index)"
             v-model="row.TEAM_EVALUATE_VALUE_OUT_LIST[index].EVALUATE_VALUE_SCORE" 
             placeholder="请输入0 ~ 100分"
             @change="getEvaluateData($index)"
          ></el-input>
          <span v-else>{{ row.TEAM_EVALUATE_VALUE_OUT_LIST[index].EVALUATE_VALUE_SCORE }}</span>
      </template>
</el-table-column>

三、综合得分计算：

综合得分计算的实现就是在每填写一个分数时就实时更新该行数据的综合得分（注意：在计算的时候需要先将综合得分剔除，再对评估项进行分数相加）。这块代码主要想记录的一点是：通过使用$set(Object,key,value)来进行强制双向数据绑定。如果不通过强制绑定，综合得分计算出来的分数并不能立刻在列表中展示，导致页面展示的综合得分是不对的。

getEvaluateData(rowIndex){
      let countSum = 0;
      let scoreSum = 0;
      let teamAssess = this.form.teamAssess[rowIndex].TEAM_EVALUATE_VALUE_OUT_LIST.filter((item)=>{ return item.EVALUATE_VALUE_CODE !== '18' });
      teamAssess.forEach((item) =>{
        if(item.EVALUATE_VALUE_SCORE){
          countSum = countSum + Number(item.EVALUATE_VALUE_SCORE);
          scoreSum = this.$commonUtil.operation(countSum,this.form.teamAssess[rowIndex].TEAM_EVALUATE_VALUE_OUT_LIST.length - 1,'divide');
          this.$set(this.form.teamAssess[rowIndex].TEAM_EVALUATE_VALUE_OUT_LIST[this.form.teamAssess[rowIndex].TEAM_EVALUATE_VALUE_OUT_LIST.length - 1],'EVALUATE_VALUE_SCORE',scoreSum);
        }
      })
    },

关于vue的$set方法，这个文章里也有解释和使用：https://www.cnblogs.com/xxflz/p/11401603.html

如有更好的方法，欢迎大家指正！