代码案例:
<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>
效果图: