vue根据ID(数字、编号)显示对应的文字状态
原来的样式想要显示的样式方式一:使用slot-scope+计算属性;(关于计算属性传参,参考的是vue 计算属性传参,并返回处理结果)方式二:使用slot-scope<template><el-table :data="TemplateList" highlight-current-row><el-table-columnlabel="模板类型方式一"><
·
原来的样式
想要显示的样式
方式一:使用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>
更多推荐
已为社区贡献2条内容
所有评论(0)