Ant Design Vue 下拉框 可以输入 可以查询 直接上代码
效果图 （输入内容查询后端 返回下拉的值 ，如何查询后端是空的直接 把输入的内容 赋值给 输入框）
在这里插入图片描述
<template><div><a-selectv-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearch"style="width: 200px"><a-select-option v-for="option in dropdownOptions" :key="option">{{ option }}</a-select-option></a-select></div>
</template><script>
import { getAction, postAction } from '@/api/manage';export default {data() {return {dropdownOptions: [],inputValue: '', // 添加一个用于保存输入内容的变量};},methods: {onSearch(value) {// 如果输入值为空，则清空下拉选项if (!value) {this.dropdownOptions = [];return;}this.inputValue = value; // 更新输入框的值为输入内容// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', { name: value, type: 'name' }).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptions = res.data.rows[0];} else {this.dropdownOptions = [];}} else {this.dropdownOptions = [];}});// 将输入值传给后端this.sendValueToBackend(value);},sendValueToBackend(value) {console.log(value);// 调用后端接口，将输入值传给后端// axios.post('/your-backend-url', { value })// .then(response => {// // 处理后端返回的数据// })// .catch(error => {// // 处理错误// });},},
};
</script>
后端代码
/** ycw* 查询商品名字 返回10条名字* @param name* @param type* @param request* @return* @throws Exception*/@GetMapping(value = "/getNameOter")@ApiOperation(value = "单据明细列表")public BaseResponseInfo getNameOter(@RequestParam("name") String name,@RequestParam("type") String type,HttpServletRequest request) throws Exception {JSONObject outer = new JSONObject();BaseResponseInfo res = new BaseResponseInfo();JSONArray dataArray = new JSONArray();List<String> result = new ArrayList<>();try {Material material1 = new Material();if (type.equals("name")) {material1.setName(name);List<Material> dataList = materialMapper.selectByOther(material1);if (dataList != null && dataList.size() > 0) {for (Material material : dataList) {result.add(material.getName());}}else{
// result.add(name);}}dataArray.add(result);outer.put("rows", dataArray);res.code = 200;res.data = outer;} catch (Exception e) {e.printStackTrace();res.code = 500;res.data = "获取数据失败";}return res;}
放入 实际代码里面的内容 多了一个赋值的 this.form.setFieldsValue({‘name’: value})
<a-col :md="6" :sm="24"><a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称" data-step="1" data-title="名称" data-intro="名称必填，可以重复"><a-select placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]"v-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearch"style="width: 200px"><a-select-option v-for="option in dropdownOptions" :key="option">{{ option }}</a-select-option></a-select></a-form-item></a-col>
onSearch(value) {// 如果输入值为空，则清空下拉选项if (!value) {this.dropdownOptions = [];return;}// 重置输入框的值为空// this.inputValue = '';this.inputValue = value; // 更新输入框的值为输入内容this.form.setFieldsValue({'name': value})// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', { name: value, type: 'name' }).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptions = res.data.rows[0];} else {this.dropdownOptions = [];}} else {this.dropdownOptions = [];}});
