mand-mobile实现md-selector多选加搜索

根据mand-mobile文档mand-mobile下的selector组件无法实现搜索，所以需要自定义一个搜索框；

文档介绍：selector插槽有默认插槽（default），顶部插槽（header）和底部插槽（footer）

实现：

 <md-selectorv-model="isShow":data="dataList"max-height="320px"title="标题"large-radius@confirm="confirm"okText="确定"cancelText="取消"multi:defaultValue="default_data?default_data:[]":key="refreshNum"//设置key值，通过每次获取数据源接口实现key++，根据diff会重新渲染组件，            //否则会因为组件高度问题导致无法实现下拉；:icon="''"//选中图表设置为空，下面自定义，否则点击图标无法触发事件:icon-inverse="''"//不选中图表设置为空，下面自定义，否则点击图标无法触发事件><div slot="header" class="search-header"><input type="search" ref="name" class="input" v-model="name" placeholder="搜                                                     索....." @blur="searching" /></div><div slot-scope="{ option, selected }" class="select-item-content"                                                  @click="chooseMth(option, selected)"><div class="md-selector-custom-title">{{ option.label }}</div> <div class="md-icon"><md-icon :name="selected?'right':''" :color="'#1f72f1'"></md-icon></div></div>
</md-selector>js:chooseMth(val,select){if(!select){//chooseTemp为选中的暂存区if(this.chooseTemp){this.chooseTemp=this.chooseTemp+','+val.value}else{this.chooseTemp=val.value}}else{if(this.chooseTemp){let tempArr=this.chooseTemp.split(",")let temp=tempArr.filter(item=>{return item !=val.value})this.chooseTemp=temp.join(",")}}},//搜索searching() {this.dataList = [];this.getList();//获取列表方法},getList(){this.refreshNum++//每次请求实现key++以重新渲染组件...//通过接口传参的方式实现搜索}//获取全部数据getAllList(){...  //getList会请求到搜索内容的数据进行渲染，但是要确保每次搜索前选中的数据会保存，                需要保存一份获取全部数据的列表  }

mand-mobile实现md-selector多选加搜索相关推荐

android二级联动购物车,Android实现二级购物车的全选加反选、总价功能
本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...
获取附近小区信息_小程序获取当前位置加搜索附近热门小区及商区的方法
本文详细的介绍了小程序获取当前位置加搜索附近热门小区及商区的方法,分享给大家两种方法:一种是腾讯地图获取,另一种是百度地图获取我用的是腾讯地图获取步骤如下 1.话不多说,直接上干货实现上图效果, ...
Mand Mobile 快速上手
Vue CLI 3(插件)(支持1.x/2.x) 创建项目: vue create my-project cd my-project 安装依赖包 npm install --save-dev vue- ...
echarts5.0lengend的全选加自定义icon功能
option 的配置如下 legend: { // 头部导航栏data: ['健康数', '亚健康数', '故障数'], // 自定义left: '7%',textStyle: {color: '#f ...
checkbox 多选 mysql 搜索_mySQL技术的方方面面，不管是应用还是面试，看这一文就够了...
mysql 1 基本知识支持分区默认innodb引擎 1-1 常用引擎 myisammy-z[ei]m innodbin-no-db 2 数据类型整数,tiny int 1位 127/255,s ...
html代码在线解析,VIP在线解析HTML源码（修改论坛的源码、加搜索功能）
本帖最后由闷骚小贱男于 2017-3-28 00:08 编辑今天有朋友问我要TX的VIP看视频来着,就给了他一个在线的网站,心想着自己也弄一个解析的吧.在论坛搜到一个源码传送门:看到有需要直接 ...
Winform中使用DevExpress的CheckEdit控件实现多选条件搜索
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...
html 输入框加搜索框,如何实现一个input搜索框？
这是默认样式这是聚焦后显示这是输入内容看着很简单对吧,我一开始也是这么想的,结果当我做起来我发现.....这tm就离谱先说下我怎么实现的,元素是input,中间的图片用背景图,搜索岗位是pla ...
pbootcms自定义表单增加搜索
修改apps\admin\model\content\formmodel.html 增加 // 字段查找public function findFormField($table, $page, $ty ...
jquery-1.11.1.min.js文件（下拉选带搜索）
/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ ! function (a, b ...

mand-mobile实现md-selector多选加搜索

mand-mobile实现md-selector多选加搜索相关推荐

最新文章

热门文章