vue中数字转换为汉字，设置不同的标签颜色（三色）

vue前端处理，把数字变成文字

在请求函数后，把得到的数组数据遍历一下，判断条件，修改原来的数字，使之变为你想要的汉字。

data() {
    return {
    	// 接收查询的数据
      	InfoList: [],
    }
},
methods: {
    async getInfoList() {
      const { data: res } = await this.$http.get('fix', {
        params: this.queryInfo
      })
      this.InfoList = res.data

	  // 把数字变成汉字
      this.InfoList.map(function(val) {
        if (val.status === 1) {
          val.status = '待维修'
        } else if (val.status === 2) {
          val.status = '维修中'
        } else if (val.status === 3) {
          val.status = '已维修'
        }
      })

      this.total = parseInt(res.msg)
      if (!res.flag) return this.$message.error('获取信息失败!')
    }
}

标签颜色修改–三种颜色

判断绑定的数据，使之显示相应的样色：

• 待维修 --> type=‘info’ --> 灰色
• 维修中 --> type=‘primary’ --> 蓝色
• 已维修 --> type=‘success’ --> 绿色

<template slot-scope="scope">
	<el-tag
		:type="scope.row.status === '待维修' ? 'info' : scope.row.status === '维修中' ? 'primary' : 'success'"
		disable-transitions>{{scope.row.status}}</el-tag>
</template>

代码效果：