element-ui——element-ui 中的 el-select 实现远程搜索

<template>
  <div>
    <el-select v-model="inputValue" multiple collapse-tags filterable remote reserve-keyword
      :remote-method="remoteMethod" :loading="loading" placeholder="请选择">
      <el-option v-for="(item, index) in list" :key="index" :label="item" :value="item">
      </el-option>
    </el-select>
  </div>
</template>
<script>
// 引入接口
import { getSearch } from '@/api/api.js'
export default {
  data () {
    return {
      // 当前选中的项
      selectValue: '',
      list: [
        {
          id: '0',
          name: 'a'
        },
        {
          id: '1',
          name: 'b'
        },
        {
          id: '2',
          name: 'c'
        }
      ]
    }
  },
  methods: {
    // 远程搜索
    async searchAccount (val) {
      console.log(val, '输入的值...');
      await getSearch({
        name: val // 要传给后台的值 
      }).then(res => {
        if (res.code === 0) {
          this.list = res.data
        }
      })
    },
    // 远程搜索
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        this.searchAccount(query)
        this.loading = false
      } else {
        this.list = []
        this.searchAccount()
      }
    },
  }

}
</script>