今天,说一下el-select 远程搜索如何套用数据,仅供参考:
我发现自己通用el-select时,用起来比较方便,今天自己写个demo,方便自己以后用。
当multiple为true时,可以选择多个参数,为false时,只能选择一个。
<template>
<div>
<el-form class="form" :model="ruleForm" ref="ruleForm" label-width="130px" :inline="false">
<div class="clearfix">
<el-form-item class="fl" label="姓名:" prop="name" style="width:50%;">
<el-select
ref="select"
v-model="ruleForm.name"
:multiple="false"
:clearable="true"
:filterable="true"
:remote="true"
:default-openeds="prooptions"
placeholder="请输入姓名"
:remote-method="remoteMethod"
@change="$forceUpdate()"
style="width:100%"
>
<el-option
v-for="item in prooptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: 'edit',
props: {},
data() {
return {
ruleForm: {
name:""
},
// 人员
prooptions_:[
{
name:'小明',
id:0,
},{
name:'小李',
id:1,
},{
name:'小丽',
id:2,
},{
name:'小李姐',
id:3,
},{
name:'丽丽',
id:4,
}
],
prooptions:[],
}
},
created() {
this.allUserName()
},
methods: {
// 获取全部数据
allUserName() {
// this.$axios.post("接口链接", {}).then((res) => {
// this.prooptions_ = res.data;
// });
this.prooptions_
},
//筛选数据
remoteMethod(query) {
if (query !== '') {
this.prooptions = this.prooptions_.filter(item => {
return (item.name == null) ? false : item.name.indexOf(query) > -1
})
} else {
this.prooptions = [];
}
},
}
}
</script>