vue根据数字显示对应的文字状态

我的方法

原来的样式

想要显示的样式

 

方式一：使用slot-scope+计算属性；（关于计算属性传参，参考的是https://blog.csdn.net/weixin_40841731/article/details/83374872）

方式二：使用slot-scope

<template>
   <el-table :data="TemplateList" highlight-current-row>
      <el-table-column  label="模板类型方式一">
          <template slot-scope="scope">
                {{computedSiteType(scope.row.SiteType)}}
          </template>
      </el-table-column>
      <el-table-column  label="模板类型方式二">
          <template slot-scope="scope">
                 {{options[scope.row.SiteType]['label']}}
          </template>
      </el-table-column>
   </el-table>
<template>

computed:{
    computedSiteType(){
        return function(siteType){
            return this.options[siteType]['label']
        }
    },
},

data(){
  options: [
    {
        value: "0",
        label: "全部"
    },
    {
        value: "1",
        label: "PC版"
    },
    {
        value: "2",
        label: "手机版"
    }...
  ],
}

 

 

别人的方法

使用map定义

// 定义字典

const map = {boolean: ['否', '是']}
// 或者

const map = {boolean: {0: '否', 1: '是', 2: '不知道'}}
// 调用

<div>{{map.boolean[item.enable]}}</div>

 

或者使用计算熟属性

<div id="app"><h1>{{ isture }}</h1></div>
<script>
var app = new Vue({
  el : "#app",
  data : {
    info:[{"id":"123","code":"Y002","name":"芝士饼干","channel":"网银","description":"网银","enable":1,"order":2}]
  },
  computed : {
    isture : function(){
      return this.info[0]['enable']==1 ? "是":"否"
    }
  }
})
</script>

https://segmentfault.com/q/1010000011161776