elementUI表格中某个字段（state）使用盘算属性进行转换为对应中文表现
代码案例：<template>
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
width="180"
/>
<el-table-column
prop="name"
label="姓名"
width="180"
/>
<el-table-column
prop="state"
label="地址"
>
<template slot-scope="scope">
{{ stateNameMap(scope.row.state) }}
</template></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
homeCity: [
{ state: 1, name: '李四' },
{ state: 3, name: '张三' },
{ state: 7, name: '王五' },
{ state: 33, name: '王五1' }
],
state: 1,
tableData: [{
date: '2016-05-02',
name: '王小虎',
state: 1
}, {
date: '2016-05-04',
name: '王小虎',
state: 3
}, {
date: '2016-05-01',
name: '王小虎',
state: 7
}, {
date: '2016-05-03',
name: '王小虎',
state: 3
}]
}
},
computed: {
stateNameMap() {
return (state) => {
console.log(state, '>>>')
// 在homeCity数组中查找具有匹配ID的对象
const row = this.homeCity.find(r => r.state === state)
// 如果找到了对象，则返回其name属性；否则，返回一个默认值（如'未知城市'）
return row ? row.name : '未知城市'
}
}
},
methods: {
}
}
</script>
结果图：https://i-blog.csdnimg.cn/direct/11569e9b86c74033a3b45b47e6104655.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]