el-select给我们提供了远程搜索功能。可以从服务器搜索数据,输入关键字进行查找。
为了启用远程搜索,需要将filterable和remote设置为true。其中filterable属性表示是否可搜索,remote属性表示是否为远程搜索。
同时还需要传入一个remote-method。remote-method为一个方法,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,
如果el-option是通过v-for指令渲染出来的,此时需要为el-option添加key属性,且其值需具有唯一性,比如图中的item.id。循环的数组为options,内容为从后台请求到的数据。
接着在remotemethod方法中向后台请求数据,有关ajax请求后台数据的内容可以点击此链接>>查看。将loading值先设置为true,当请求数据成功后再改为false,实现加载数据功能。请求到的数据赋值给options(options为下拉列表中循环的数据)。这样便可以实现输入关键词,下拉列表中就自动渲染出搜索到的所有相关数据。
下一篇: 常见的css预处理器——Less