vue-element-ui-select下拉搜索以及多选
目录
vue element-ui select下拉搜索以及多选
搜索框
搜索结果以及多选
HTML
multiple 是否多选
filterable 是否可搜索
remote 是否为远程搜索
reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="名称"
:remote-method="remoteMethod"
:loading="loading" style="width: 600px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>Script
把接口返回的数据用map处理成自己想要的显示格式，然后再用setTimeout搜索查找
export default {
name: '开发模式',
data() {
return {
loading:false,
options: [],
value: [],
list: [],
}
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
let params = {name: query,page: 1,limit: 15}
list(params).then(res => {
if(!res.data.length)
return
this.list = res.data.map(item => {
return { value: `${item.value}`, label: `${item.label}` };
});
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
}).catch(error => {
console.log(error)
})
} else {
this.options = [];
}
},
//...
}
}选中值格式： [ “1”, “2” ]
后端php
public function list(){
$param = $this->param();
$data = array(
array('label'=>'茶百道(成都)','value'=>1),
array('label'=>'茶百道(南充)','value'=>2),
array('label'=>'茶百道(上海)','value'=>3)
);
return success($data,'',200);
}