el-select远程搜索_el-select 远程搜索

//远程搜素
<el-select
        v-model="userName"
        filterable
        remote
        :remote-method="remoteMethod"
        :loading="loading"
        @change="selectChanged"
        clearable
        :disabled="disabled" 
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      options: [], //选项
      loading: false,
      list: [], //筛选后的可选项
    };
  },
	methods: {
        //筛选
		async remoteMethod(query) {
       		if (query !== "") {
             this.loading = true;
             let { data } = await getProfess(query);
             this.list = data.map((item) => {
               return {
                 value: `${item.userId}`,
                 label: `${item.userName}`,
               };
             });
             setTimeout(() => {
               this.loading = false;
               this.options = this.list.filter((item) => {
                 return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
               });
             }, 200);
          } else {
             this.options = [];
            }
     },
    // 选中后的处理
    selectChanged(params) {
        console.log(params)
    },   
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

上面那个会进行实时搜素，后端大哥说不要一直搜等用户输入完成后点击回车再进行搜索就有了下面这个

//点击回车后再进行搜素
<el-select
        v-model="userName"
        filterable
        remote
        :remote-method="remoteMethods"
        :loading="loading"
        @change="selectChanged"
        clearable
        :disabled="disabled"
        @keydown.enter.native="remoteMethod"  
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
</el-select>
<script>
export default {
  data() {
    return {
      options: [], //选项
      loading: false,
      list: [], //筛选后的可选项
      remoteSearchQuery: ''
    };
  },
	methods: {
        remoteMethods(query){
          this.remoteSearchQuery = query
        },
        //筛选
		async remoteMethod() {
       		if (this.remoteSearchQuery !== "") {
             this.loading = true;
             let { data } = await getProfess(this.remoteSearchQuery);
             this.list = data.map((item) => {
               return {
                 value: `${item.userId}`,
                 label: `${item.userName}`,
               };
             });
             setTimeout(() => {
               this.loading = false;
               this.options = this.list.filter((item) => {
                 return item.label.toLowerCase().
                 indexOf(this.remoteSearchQuery.toLowerCase()) > -1;
               });
             }, 200);
          } else {
             this.options = [];
            }
     },
    // 选中后的处理
    	selectChanged(params) {
        	console.log(params)
    	},   
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63