原来的样式
在这里插入图片描述想要显示的样式
在这里插入图片描述方式一:使用slot-scope+计算属性;(关于计算属性传参,参考的是vue 计算属性传参,并返回处理结果

方式二:使用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>
Logo

前往低代码交流专区

更多推荐