Element-ui select远程搜索
element
 A Vue.js 2.0 UI Toolkit for Web
 项目地址:https://gitcode.com/gh_mirrors/eleme/element
  免费下载资源
免费下载资源
       ·  
 template部分:
       <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:
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()的值要与上方对应
 GitHub 加速计划 / eleme / element
 GitHub 加速计划 / eleme / element 13
13
             1
1
             下载
下载
            
          A Vue.js 2.0 UI Toolkit for Web
        
 
          最近提交(Master分支:1 个月前 )
 c345bb45 
 1 年前 
a07f3a59 
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前 
 
 新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐



所有评论(0)