Ant Design
Vue提供了一个非常强大和灵活的
表格组件，可以很方便地进行
搜索操作。下面是一个简单的示例代码，演示了如何使用Ant Design
Vue的
表格组件进行
搜索：
```
vue
<template>
<div>
<a-input-search v-model="searchText" @search="handleSearch" placeholder="输入关键字
搜索" style="margin-bottom: 10px;" />
<a-
table :columns="columns" :data-source="filteredData" :pagination="false" />
</div>
</template>
<script>
import {
Table, Input } from 'ant-design-
vue';
export default {
components: {
'a-
table':
Table,
'a-input-search': Input.Search,
},
data() {
return {
searchText: '', //
搜索关键字
data: [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 35 }
],
columns: [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' }
]
};
},
computed: {
filteredData() {
// 根据
搜索关键字过滤数据
return this.data.filter(item => {
return Object.values(item).some(value => {
return value.toString().toLowerCase().includes(this.searchText.toLowerCase());
});
});
}
},
methods: {
handleSearch() {
// 处理
搜索操作
// 这里可以根据实际需求进行
搜索逻辑的处理
console.log('
搜索关键字:', this.searchText);
}
}
};
</script>
<style scoped>
/* 添加样式，可根据
需要自定义 */
</style>
```
在上面的代码中，我们使用了Ant Design
Vue的`Input.Search`组件作为
搜索框，并将
搜索关键字绑定到`searchText`属性上。当用户输入关键字并点击
搜索按钮时，会触发`@search`事件，调用`handleSearch`方法进行
搜索操作。
表格数据存储在`data`数组中，每个对象表示一行数据。`columns`数组定义了
表格的列配置。
通过计算属性`filteredData`对
表格数据进行过滤，只显示包含
搜索关键字的行数据。
你可以根据实际需求修改代码，并在`handleSearch`方法中处理
搜索逻辑。
这篇文章介绍了如何在Vue组件中使用v-model绑定文本输入框，并利用keyup.enter事件监听器实现当用户按下Enter键时触发searchData方法，以实现搜索功能。
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
