Element-ui select远程搜索

template部分: 

       
          
            
          
        

filterable: 是否可搜索 

remote: 是否为远程搜索

remote-method: 远程搜索方法

reserve-keyword:多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词

js:

data: {
      //筛选完的部门列表信息
      userIdFilter:[],
      // 用来下拉列表模糊查询
      userIdList:[],
}

methods: {
    getUserIdList() {
      this.listLoading = true
      queryAllUser().then(res => {
        this.userIdFilter = res.data
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.userIdList = this.userIdFilter.filter(item => {
            return item.value.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.userIdList = [];
      }
    },
}

要注意option中应该对应的是用来下拉列表模糊查询

js中return item.value.toLowerCase()的值要与上方对应

 

你可能感兴趣的:(vue,ui,vue.js,javascript)