原来的样式
在这里插入图片描述想要显示的样式
在这里插入图片描述方式一:使用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>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐