ant design vue和vue2实现表格查询的具体代码
时间: 2023-12-26 19:04:58 浏览: 41
对于Ant Design Vue和Vue2的表格查询,你可以使用Ant Design Vue提供的Table组件和Vue2的数据双向绑定来实现。下面是一个示例代码:
```vue
<template>
<div>
<a-input-search
v-model="searchText"
enter-button
@search="handleSearch"
style="width: 200px; margin-bottom: 16px"
/>
<a-table :columns="columns" :data-source="filteredData"></a-table>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
data: [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 32 },
{ id: 3, name: 'Bob Johnson', age: 45 },
// 数据源示例
],
filteredData: [],
columns: [
{ title: 'ID', dataIndex: 'id' },
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
// 表格列配置
],
};
},
watch: {
searchText(newVal) {
this.filteredData = this.data.filter((item) =>
item.name.toLowerCase().includes(newVal.toLowerCase())
);
},
},
methods: {
handleSearch() {
this.filteredData = this.data.filter((item) =>
item.name.toLowerCase().includes(this.searchText.toLowerCase())
);
},
},
};
</script>
```
这个示例中,我们通过绑定`searchText`属性来实现搜索框与数据的双向绑定。当用户在搜索框中输入关键字时,通过监听`searchText`属性的变化,筛选出符合条件的数据并赋值给`filteredData`,然后在表格中展示`filteredData`的内容。
需要注意的是,这只是一个简单的示例代码,你可以根据自己的需求进行扩展和修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)