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

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

文档介绍:selector插槽有默认插槽(default),顶部插槽(header)和底部插槽(footer)

实现:
          

 <md-selector
     v-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会请求到搜索内容的数据进行渲染,但是要确保每次搜索前选中的数据会保存,                
                需要保存一份获取全部数据的列表  
    }

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值