步骤条的接口渲染

 难点：

 这些固定的文字渲染

首先创建一个数组数组里装的是需要的四个文字

 

 <el-steps :active="stepsData.identifying"
                      align-center>
              <el-step v-for="(item, index) in stepsData.convertRecords"
                       :key="index"
　　　　　　　　　　　　　　　　//使用创建好的数组
                       :title=" fourCharacters[item.clientStatus - 1]"
                       :description="item.dateTime || '未进行'" />
            </el-steps>

 

重点：   :title=" fourCharacters[item.clientStatus - 1]"

全部代码：

 <el-steps :active="stepsData.identifying"
                      align-center>
              <el-step v-for="(item, index) in stepsData.convertRecords"
                       :key="index"
                       :title=" fourCharacters[item.clientStatus - 1]"
                       :description="item.dateTime || '未进行'" />
            </el-steps>

  //数组：
    fourCharacters: ['邀约', '到访', '试听', '转化成功',],
  //请求数据    
    const clientId = this.renewData.clientId
      convertRecords(JSON.stringify(clientId)).then(res => {
        this.stepsData = res.data
      })