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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
angularjs性能优化的方法
2018/09/05 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
JS实现公告上线滚动效果
2021/01/10 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python爬取成语接龙类网站
2018/10/19 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
基于python实现计算两组数据P值
2020/07/10 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
毕业留言寄语大全
2014/04/10 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年护士长工作总结
2014/11/11 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python