如何在elementUi动态表格table中翻译字典值。vue通用方案
实现思路:先渲染动态行,然后在行里面添加slot插槽,写需要翻译字典的判断。vue的v-for 的子组件里面 v-if 。 注意v-for与v-if不要写在同一标签内。例子:<!-- 表格 --><el-table style="width: 100%" border :data="tableData"><template v-for="(item,index) in
·
实现思路:
先渲染动态行,然后在行里面添加slot插槽,写需要翻译字典的判断。
vue的v-for 的子组件里面 v-if 。 注意v-for与v-if不要写在同一标签内。
例子:
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column
:key="index"
:prop="item.keyValue"
:label="item.content"
>
<template slot-scope="scope">
<span v-if="item.keyValue=='sex'" style="margin-left: 10px">
{{ showDictValue(scope.row[item.keyValue],sexDict) }}
</span>
<span v-if="item.keyValue=='userStatus'" style="margin-left: 10px">
{{ showDictValue(scope.row[item.keyValue],userStatusDict) }}
</span>
<span v-else style="margin-left: 10px">
{{ scope.row[item.keyValue] }}
</span>
</template>
</el-table-column>
</template>
</el-table>
data(){
tableHead:[{
keyValue:"username",
content:"客户姓名"
},{
keyValue:"sex",
content:"客户性别"
},{
keyValue:"userStatus",
content:"客户状态"
}],
sexDict:[{ // 此处的字典可以从后台获取(建议方便维护),或者前端写死(不建议)
value:"01",
content:"男"
},{
value:"02",
content:"女"
}],
userStatusDict:[{
value:"01",
content:"上班"
},{
value:"02",
content:"睡觉"
}]
}
methods:{
/**
* 动态表格字典翻译
*/
showDictValue(val,dictArr){
if(val!=""){
return dictArr.filter(item=>item.value==val)[0].content;
}
}
}
惟求热泪盈眶与成就感 _
更多推荐
已为社区贡献1条内容
所有评论(0)