select下拉联想选择

效果图

<el-form-item
          prop="storeId"
          label="所属门店"
        >
          <el-select
            v-model="queryParams.storeId"
            placeholder="请输入"
            filterable
            remote
            :remote-method="remoteStore"
            clearable
            class="w-all"
          >
            <el-option
              v-for="item in storeOptions"
              :key="item.id"
              :label="item.name+'/'+item.id"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

data(){
  return{
    storeOptions: [], // 所属门店
  }
},
methods:{
   // 所属门店 - 远程商家下拉框搜索
    async remoteStore(query) {
      if (query !== '') {
        this.loading = true
        await this.getListChooseStore(query)
        this.loading = false
      } else {
        // 没输入时为空数组
        this.storeOptions = []
      }
    },
    // 所属门店 - 商家远程下拉框接口
    async getListChooseStore(query) {
      let queryData = {}
      // 纯数字,数字字符串就用id，不是就用name
      const isNumber = /^\d+$/.test(query)
      if (isNumber) {
        queryData = { id: query }
      } else {
        queryData = { name: query }
      }
      const { code, rows } = await listChooseStore(queryData)
      if (code === 0) {
        this.storeOptions = rows
      }
    },
}