用ant-design-vue3写模糊查询
时间: 2023-11-22 14:37:58 浏览: 266
可以使用Ant Design Vue 3中的AutoComplete组件来实现模糊查询。
首先,需要先安装Ant Design Vue 3和axios:
```bash
npm install ant-design-vue@next axios
```
然后在需要使用的组件中引入Ant Design Vue 3和axios:
```javascript
import { defineComponent } from 'vue'
import { AutoComplete } from 'ant-design-vue'
import axios from 'axios'
```
接下来就是在组件中使用AutoComplete组件来实现模糊查询:
```javascript
<template>
<a-auto-complete
v-model:value="keyword"
:options="options"
:filter-option="false"
@search="handleSearch"
@select="handleSelect"
>
<a-input
slot="search"
:placeholder="placeholder"
suffix-icon="search"
/>
</a-auto-complete>
</template>
<script>
export default defineComponent({
name: 'MyAutoComplete',
data() {
return {
keyword: '',
options: [],
placeholder: '请输入关键词',
}
},
methods: {
async handleSearch(keyword) {
if (keyword) {
const res = await axios.get('https://api.example.com/search', {
params: {
keyword,
},
})
this.options = res.data.results
} else {
this.options = []
}
},
handleSelect(value) {
console.log('选中的值:', value)
},
},
})
</script>
```
在上面的例子中,AutoComplete组件的options属性绑定了一个options数组,这个数组中的元素是模糊查询的结果。
在handleSearch方法中,使用axios发送请求获取模糊查询的结果,并将结果赋值给options数组。如果没有关键词,则清空options数组。
在handleSelect方法中,可以处理选中结果的逻辑。
最后,在组件中使用MyAutoComplete组件即可实现模糊查询功能。
阅读全文