当前位置: 首页 > 工具软件 > mand-mobile > 使用案例 >

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

蓟清野
2023-12-01

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

 类似资料: