组件Element中的Select选择器——远程搜索

<template>
  <div class="form-group">
     <el-form-item label="所属机构" prop="org">
         <el-select
             v-model="queryForm.org"
             clearable="true"
             filterable
             remote
             reserve-keyword
             placeholder="请输入关键词"
             :remote-method="remoteMethod"
             :loading="loading">
             <el-option
                 v-for="item in orgList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
             </el-option>
         </el-select>
      </el-form-item>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        //远程搜索组件
        orgList: [],
        list: [],
        loading: false,
        allOrds: []
      }
    },
    mounted() {
            this.initData();
    },
    methods: {
      initData() {
          //远程搜索机构
          this.http.get('/admin/doctorInfo/queryOrg').then(resp => {
          //设置机构的选择项
          this.allOrds = resp.data;

          this.list = this.allOrds.map(item => { //组装，只需要id和name
              return {value: item.id, label: item.name};
             });
          });
        }
      }
      remoteMethod(query) {
          if (query !== '') {
              this.loading = true;
              setTimeout(() => {
                  this.loading = false;
                  this.orgList = this.list.filter(item => {
                      return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.orgList = [];
                }
            }
    }
  }
</script>

---

这种写法是将对应数据全部查出来，在根据用户输入关键字用于过滤，最终将合适的数据放入下拉框中。

但是实际上不应该立刻将所有数据暴露出去，这里需要再改造，控制数据的获取。