el-select远程调接口，并进行选择；el-autocomplete输入远程调接口，并进行选择

最新推荐文章于 2024-10-31 09:13:23 发布

加蓓努力我先飞

最新推荐文章于 2024-10-31 09:13:23 发布

阅读量975

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发 elementui 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ingenuou_/article/details/132190905

前端开发同时被 2 个专栏收录

93 篇文章

订阅专栏

elementui

15 篇文章

订阅专栏

文章介绍了如何在Vue应用中使用ElementUI的el-select和el-autocomplete组件实现远程数据搜索和选择功能，包括v-model绑定、remote属性的使用、接口调用以及处理用户选择的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.el-select远程调接口，并进行选择

<el-select
    v-model="name11"
    filterable
    remote
    reserve-keyword
    placeholder="请输入"
    size="small"
    :remote-method="querySearchAsync"
    :loading="loadingGr"
    style="width: 100%"
    clearable
    @change="handleSelect"
    >
    <el-option
      v-for="item in userList"
      :key="item.name"
      :label="item.name"
      :value="item.name"
    >
    </el-option>
</el-select>

name11:"",
userList: [], // 企业名称list
loadingGr: false,

async querySearchAsync(queryString) {
  console.log('queryString', queryString)
  if (queryString) {
    this.loadingGr = true
    //调用接口
    const res = await companyList(queryString)
    console.log('res.data', res.data)

    this.userList = res.data
    this.loadingGr = false
  } else {
    this.userList = []
  }
},
handleSelect(val) {
   console.log('val', val)
},

2. el-autocomplete输入远程调接口，并进行选择

<el-autocomplete
      v-model="name11"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
></el-autocomplete>

name11:'',
userList:[],

async querySearchAsync(queryString, cb) {
  const res = await companyList(queryString)
      // console.log('res1111', res, res.data)
  this.userList = JSON.parse(JSON.stringify(res.data))
      //value在列表中是必须的
  this.userList.forEach(item => {
    item.value = item.name
  })
  const data1 = this.userList
  cb(data1)
},
handleSelect(val) {
    console.log('val', val)
},