ToB企服应用市场:ToB评测及商务社交产业平台

标题: elementUI表格中某个字段（state）使用盘算属性进行转换为对应中文表现 [打印本页]

---

作者: 渣渣兔    时间: 2024-9-30 03:18
标题: elementUI表格中某个字段（state）使用盘算属性进行转换为对应中文表现
代码案例：

1. <template>
2.   <el-table
3.     :data="tableData"
4.     style="width: 100%"
5.   >
6.     <el-table-column
7.       prop="date"
8.       label="日期"
9.       width="180"
10.     />
11.     <el-table-column
12.       prop="name"
13.       label="姓名"
14.       width="180"
15.     />
16.     <el-table-column
17.       prop="state"
18.       label="地址"
19.     >
20.       <template slot-scope="scope">
21.         {{ stateNameMap(scope.row.state) }}
22.       </template></el-table-column>
23.   </el-table>
24. </template>
26. <script>
27. export default {
28.   data() {
29.     return {
30.       homeCity: [
31.         { state: 1, name: '李四' },
32.         { state: 3, name: '张三' },
33.         { state: 7, name: '王五' },
34.         { state: 33, name: '王五1' }
35.       ],
36.       state: 1,
37.       tableData: [{
38.         date: '2016-05-02',
39.         name: '王小虎',
40.         state: 1
41.       }, {
42.         date: '2016-05-04',
43.         name: '王小虎',
44.         state: 3
45.       }, {
46.         date: '2016-05-01',
47.         name: '王小虎',
48.         state: 7
49.       }, {
50.         date: '2016-05-03',
51.         name: '王小虎',
52.         state: 3
53.       }]
54.     }
55.   },
56.   computed: {
58.     stateNameMap() {
59.       return (state) => {
60.         console.log(state, '>>>')
61.         // 在homeCity数组中查找具有匹配ID的对象
62.         const row = this.homeCity.find(r => r.state === state)
63.         // 如果找到了对象，则返回其name属性；否则，返回一个默认值（如'未知城市'）
64.         return row ? row.name : '未知城市'
65.       }
66.     }
67.   },
68.   methods: {
70.   }
71. }
72. </script>

复制代码

结果图：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4