在el-table-column中使用插槽solt 字符串拼接

237 阅读1分钟

后台返回的数据结构

image.png

需要的效果是这样的 也就是上图红框里的字段

image.png

在el-table-column中使用插槽并且字符串拼接出想要的效果

<el-table-column 
      prop="targetDescribe"
      label="考核期  指标行为描述">
      <template slot-scope="scope" v-if="'targetDescribe'">
           <span v-for="(item,index) in scope.row.performanceEfficiencyConfigItemModelList">
                 {{`${index + 1}.${item.answerText}${index == 2 ? "" : "("}${index == 2 ? "" : item.score }${index == 2 ? "" : ")"}`}} &nbsp; &nbsp;
           </span>
      </template>
</el-table-column>

实现

image.png