el-table-column 结合template对某列后台数值，在前端显示对应文字，并不同数据显示对应不同样式

el-table-column 结合template对某列后台数值，在前端显示对应文字，并分不同的状态，显示醒目

新需求：对table中的某列，后台数据为数字，在前端显示对应的中文，并根据数值，对数据分为三个状态，为空、进行中、完成。

对vue刚入门没多久的我，自然首先百度。
嗯，确实查到了方法。但是，不适用我的情况。

<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="sex" label="性別" width="180" :formatter="formatSex"></el-table-column>
</el-table>

而我的情况，我是循环显示的。

<el-table-column
     v-for="column in TableColumns"
     :prop="column.field"
     :label="column.label"
     :key="column.label"
     sortable="custom">
</el-table-column>

利用formatter属性，可以从官方的帮助文档里查到。

后来，采用template

slot-scope="scope"定义模板
scope 是随便起的名字,通过scope获取数据

基本模板

<el-table :data="tableData" style="width: 100%;text-align: center;" height="360">
    <el-table-column label="序号" width="180">
        <template slot-scope="scope">
            <div></div>
        </template>
     </el-table-column>
 </el-table>

我一开始，在方法中进行分情况讨论。但是，无法与template结合起来使用。

res.items.forEach(element => {
    console.log(element.jd)
    if(element.jd == null){
        element.jd = "当前进度为空"+"("+"0/9"+")"
     }else if(element.jd == "1"){
          element.jd = "步骤1"+"("+(element.jd)+"/9"+")"
     }
     else if(element.jd == "2"){
          element.jd = "步骤2"+"("+(element.jd)+"/9"+")"
     }
     .....

最后终于完成了需求，以下为一些主要代码。
由于我这个场景比较特殊，所以首先把要不同的那列拎出来。在对状态进行判断显示对应的内容。

<template slot-scope="scope">
     //针对进度这一列
     <div v-if="column.field == 'jd'">
         //当进度为null，或者为""时，显示空，并为红色
         <div v-if="scope.row.jd == null || scope.row.jd == ''">
             <div class="kong"><span>空</span></div>
         </div>
         
         //当进度为1到8时，显示为绿色
         <div v-else-if="scope.row.jd > 0 && scope.row.jd < 9">
             <div class="jxz">
                  <span v-if="scope.row.jd == 1">步骤1({{ scope.row.jd }}/9)</span>
                  <span v-if="scope.row.jd == 2">步骤2({{ scope.row.jd }}/9)</span>
                 //......以此类推
             </div>
          </div>
          
          //当进度为9时，即完成，显示为蓝色
          <div v-else>
              <div class="wancheng">
                  <span v-if="scope.row.jd == 9">最后一步({{ scope.row.jd }}/9)</span>
              </div>
           </div>
      </div>
      
      //这个很重要，我一开始忘写了，导致表格中的其他列，不显示了。
      //这块是为了显示其他列的，千万不要忘。
      <div v-else>
           {{scope.row[scope.column.property]}}
      </div>
</template>

在为kong、jxz、wancheng设置样式。
结果如下

如果，有更好的方法，欢迎留言。