按颜色分类的网页设计欣赏网站,成都网站网页制作,辽宁省建设培训中心网站,软件开发工具手机版Ant Design Vue 下拉框 可以输入 可以查询 直接上代码
效果图 #xff08;输入内容查询后端 返回下拉的值 #xff0c;如何查询后端是空的直接 把输入的内容 赋值给 输入框#xff09;
在这里插入图片描述
templatediva-selectv-model.lazyi…Ant Design Vue 下拉框 可以输入 可以查询 直接上代码
效果图 输入内容查询后端 返回下拉的值 如何查询后端是空的直接 把输入的内容 赋值给 输入框
在这里插入图片描述
templatediva-selectv-model.lazyinputValueshow-searchdefault-active-first-optionsearchonSearchstylewidth: 200pxa-select-option v-foroption in dropdownOptions :keyoption{{ option }}/a-select-option/a-select/div
/templatescript
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();ListString result new ArrayList();try {Material material1 new Material();if (type.equals(name)) {material1.setName(name);ListMaterial 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 :md6 :sm24a-form-item :labelCollabelCol :wrapperColwrapperCol label名称 data-step1 data-title名称 data-intro名称必填可以重复a-select placeholder请输入名称 v-decorator.trim[ name, validatorRules.name]v-model.lazyinputValueshow-searchdefault-active-first-optionsearchonSearchstylewidth: 200pxa-select-option v-foroption in dropdownOptions :keyoption{{ option }}/a-select-option/a-select/a-form-item/a-colonSearch(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 [];}});
