Element-ui select远程搜索

帆仔哟2023-09-11 18:46

template部分:

bash 复制代码

       <el-form-item label="用户" prop="userId">
          <el-select
            v-model="temp.userId"
            placeholder="用户"
            filterable
            remote
            :reserve-keyword="false"
            :remote-method="remoteMethod"
            :loading="loading"
            class="filter-item">
            <el-option
              v-for="item in userIdList"
              :key="item.key"
              :label="item.value"
              :value="item.key"/>
          </el-select>
        </el-form-item>

filterable: 是否可搜索

remote: 是否为远程搜索

remote-method: 远程搜索方法

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

js：

javascript 复制代码

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()的值要与上方对应