ant-design-vue中的select选择器,对输入值的进行筛选操作


Posted in Javascript onOctober 24, 2020

今天在设计一个标签(采用的是Select 选择器中的标签那一个)时,从后台返回了数据,但是在输入值时,没有对回显的值进行过滤匹配,通过查看官方文档,解决了这个问题。

记在这里方便以后查看。

ant-design-vue中的select选择器,对输入值的进行筛选操作

<a-form-item label='标签' v-bind="formItemLayout">
  <a-select
   mode="tags"
   :allowClear="true"
   :filterOption="filterOption"
   style="width: 100%"
   v-decorator="['tag',{rules: [{ required: true, message: '请选择标签' }]}]">
   <a-select-option v-for="t in tags" :key="t.id.toString()">{{t.tagName}}</a-select-option>
  </a-select>
</a-form-item>

methods中:

filterOption(input, option) {
  return (
   option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  );
},

其中对于过滤起作用的是filterOption

官网上对其的解释:

ant-design-vue中的select选择器,对输入值的进行筛选操作

补充知识:ant design的Select下拉选择器 带搜索功能

在做项目的过程中,可能会遇到 下拉框内容较多,为了方便用户选择加入检索功能。

用法

利用ant design 中的select选择器完成此功能。

首先 要获取下拉选择内容数据,和普通下拉选的数据结构一致,数组对象 键值对。

然后把数据渲染到选择器中,我在项目中 遇到的是数据较多,但是为了防止数据下拉较长,后端返回数据做了类似分页处理,每次返回10条数据,那在获取初始数据时其实就获取了十条数据。

把数据放到一个空数组中,然后渲染到选择器中。

componentDidMount() {
 const { dispatch } = this.props;
 dispatch({
  type: 'project/searchProject',
  payload: { },
  callback: (res) => {
  this.setState({
   data: res.data
  })
  }
 });
 }
const children = [];
data.forEach(d => {
 children.push(<Option key={d.id}>{d.name}</Option>);
})
<Select
 showSearch
 allowClear
 labelInValue
 placeholder="请选择项目"
 optionFilterProp="children"
 onSearch={this.handleSearch}
 onChange={this.handleChange}
 filterOption={(input, option) =>
  option.props.children[0].toLowerCase().indexOf(input.toLowerCase()) >= 0
 }
 >
 {children}
 </Select>

那在触发搜索功能的时候,其实只是搜索了10条内容,那在onSearch中还有去请求其他数据。

handleSearch = value => {
 const { dispatch } = this.props;
 dispatch({
  type: 'project/searchProject',
  payload: {
  q: value
  },
  callback: (res) => {
  this.setState({
   data: res.data
  })
  }
 });
};

如果输错了搜索内容,往回删除修改的时候还需要去请求一次数据,触发了onChange事件。

handleChange = value => {
 const { dispatch } = this.props;
 dispatch({
  type: 'project/searchProject',
  callback: (res) => {
  this.setState({
   data: res.data
  })
  }
 });
 };

现在功能完成了。

效果图如下:

ant-design-vue中的select选择器,对输入值的进行筛选操作

以上这篇ant-design-vue中的select选择器,对输入值的进行筛选操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jQuery知识点整理
Jan 30 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
jquery插件懒加载的示例
Oct 24 #jQuery
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 #Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 #Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 #Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 #Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 #Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
php 变量定义方法
2009/06/14 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
jQuery的一些注意
2006/12/06 Javascript
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
sails框架的学习指南
2014/12/22 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解微信UnionID作用
2019/05/15 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
初中同学聚会邀请函
2014/02/03 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
公司委托书范本
2014/04/04 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
公司车队管理制度
2015/08/04 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL