帮我用vue写一段可筛选的表格的代码
时间: 2024-05-04 17:15:20 浏览: 100
以下是一个基本的可筛选的表格的 Vue 代码示例:
```
<template>
<div>
<input type="text" v-model="search" placeholder="搜索">
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in filteredData" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
data: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
{ id: 4, name: '赵六', age: 35 }
]
}
},
computed: {
filteredData() {
return this.data.filter(item => {
return item.name.includes(this.search)
})
}
}
}
</script>
```
这个代码中,我们首先在模板中添加一个文本输入框,用户可以在其中输入搜索关键字。接着,我们使用一个 `table` 元素来展示数据,其中 `thead` 中包含表头信息,`tbody` 中通过 `v-for` 指令来遍历数据,并将其展示在表格中。
在 `script` 中,我们定义了一个 `data` 对象来存储原始数据,以及一个 `search` 属性来存储用户输入的搜索关键字。在 `computed` 中,我们通过筛选原始数据来得到一个新的 `filteredData` 数组,其中只包含符合搜索条件的数据项。最后,在模板中使用 `v-for` 指令来遍历 `filteredData` 数组,并将其展示在表格中。
这样,我们就实现了一个简单的可筛选的表格。用户可以通过输入关键字来快速筛选出符合条件的数据,并在表格中进行查看。