如何使用elselect组件的远程搜索
elementui的select组件配置项中的远程搜索代码应该怎么写？我需要根据用户输入的字符去调接口查本帖最后由 论坛管理员 于 2022-4-11 10:58 编辑
您可以参考一下下方的说明，但是详细的使用还是要看elementUI那边的，我们只是做了一个集成包装
自定义搜索和远程搜索方法:
自定义搜索和远程搜索方法，都是返回一个function(querystring){} ；querystring为当前输入值，在此方法中修改options的值。
自定义搜索方法只在“允许搜索”为“是”时生效，它会在输入值发生变化时被调用。如下面的示例：
//返回一个方法，其中this.json.$options存储的是配置的可选项
return function (querystring) {
this.json.options = this.json.$options.filter(function (item) {
return (item.label.indexOf(querystring) != -1);
});
}
远程搜索方法和自定义搜索方法类似，“远程搜索”属性必须选择“是”才会生效。它会在输入值发生变化时被调用，下面是示例代码：
//返回一个方法，其中this.json.$options存储的是配置的可选项
return function (querystring) {
this.json.loading = true; //设置组件为加载状态
window.setTimeout(function () {
this.json.loading = false; //取消组件的加载状态
this.json.options = this.json.$options.filter(function (item) {
return (item.label.indexOf(querystring) != -1);
});
}.bind(this), 2000);
}
注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。
页:
[1]