前段时间写了一个用ele的组件有默认展示的数据,也能下拉触底加载新数据,然后搜索也能实现搜索远程数据,如有需要请看使用组件加自定义指令实现下拉加载select和远程搜索select_Mr.mjw的博客-CSDN博客
然后这个相对于那个实现起来简单一点
下面就是具体代码
是在vue2中使用的先看data中的数据组件的
<a-select show-search :value="personName" placeholder="input search text"
style="width: 200px" :default-active-first-option="false" :show-arrow="false"
:filter-option="false" :not-found-content="null" @search="handleSearch"
@change="handleChange">
<a-select-option v-for="d in data" :key="d.value">
{{ d.text }}
</a-select-option>
</a-select>
data() {
return {
personName: '',
data: [],
}
},
下面是组件中用到的方法,为了提高性能代码中用到了防抖
fetch(value, callback) {
let timeout;
let currentValue;
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
getAction(`这变换成你的远程数据的接口`).then(res => {
// console.log(res, '11111111111');
//然后把请求到的数据放到data中
if (currentValue === value) {
const result = res.result;
const data = [];
result.forEach(r => {
data.push({
value: r.id,
text: r.name,
});
});
callback(data);
}
})
}
timeout = setTimeout(fake, 300);
},
handleSearch(value) {
this.fetch(value, data => (this.data = data));
},
handleChange(value) {
console.log(value);
this.personName = value;
this.fetch(value, data => (this.data = data));
},
按照以上步骤就可以实现简单的远程搜索,但是这个是默认没数据的