vue3 表格根据值显示名称到表格中
时间: 2024-05-12 20:13:38 浏览: 12
假设你有一个表格数据为 `tableData`,其中包含一个列名为 `value` 的字段,它保存了需要显示名称的值。同时,你有一个名为 `valueMap` 的对象,它将值映射到对应的名称。你可以使用 Vue 3 的模板语法和计算属性来实现在表格中显示名称,如下所示:
```html
<template>
<table>
<thead>
<tr>
<th>Value</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.value }}</td>
<td>{{ displayName(item.value) }}</td>
</tr>
</tbody>
</table>
</template>
<script>
import { computed } from 'vue';
export default {
data() {
return {
tableData: [
{ id: 1, value: 1 },
{ id: 2, value: 2 },
{ id: 3, value: 3 },
],
valueMap: {
1: 'One',
2: 'Two',
3: 'Three',
},
};
},
setup() {
const displayName = (value) => {
return computed(() => {
return value in valueMap ? valueMap[value] : '';
});
};
return { displayName };
},
};
</script>
```
在上面的代码中,我们定义了一个计算属性 `displayName`,它接受一个值作为参数,并返回该值对应的名称。这个计算属性通过 `computed` 工厂函数创建,它会自动跟踪 `value` 和 `valueMap` 的变化。在模板中,我们使用 `v-for` 指令遍历表格数据,并使用 `displayName` 方法来显示每个值对应的名称。