Vue+Element UI中Select下拉框搜索使用
根据官网总结:<el-select v-model="form.formVal" clearable filterable remote @change="changeVal($event)" :remote-method="getFormList" placeholder="请选择表单"><el-optionv-for="item in formList":key="item.
·
根据官网总结:
<el-select v-model="form.formVal" clearable filterable remote @change="changeVal($event)" :remote-method="getFormList" placeholder="请选择表单">
<el-option
v-for="item in formList"
:key="item.id"
:label="item.formName"
:value="item.id">
</el-option>
</el-select>
@change="changeVal($event)" 事件:点击选择值变化时触发
:remote-method="getFormList" 绑定一个方法名,实时传递输入框内参数到方法内
方法代码如下:
// 获取列表
getFormList(query) {
let _this = this;
let params = {
pageNum: 1,
pageSize: 10,
formName: query // 输入框内传递过来的参数
}
axios.post(this.url + '/form/list', params).then(function (res) {
if(query === null || query === undefined ){ // 当输入框没值时默认显示前10条
_this.formList = res.data.records;
}else {
_this.formList = res.data.records.filter(item => { // 输入框有值时搜索相应值
return item.formName.indexOf(query) > -1;
});
}
}).catch(function (error) {
console.log(error);
});
},
changeVal(event){
console.log(event,'参数')
},
更多推荐
已为社区贡献42条内容
所有评论(0)