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