模糊查询（一）

迈动888

于 2022-08-06 13:48:39 发布

阅读量108

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/maidong888/article/details/126193850

版权

本文介绍了如何在前端使用Vue框架配合Element UI的el-select组件实现远程搜索功能，包括设置v-model绑定、使用remote属性和自定义remote-method。重点在于如何处理数据获取、筛选和加载状态的管理。

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

代码这样

看完这个相信你已经明白了

记得别忘了遍历的数组要加到data的retrun里面

好了这些东西知道怎么用的就行

下面开始修仙吧 cv秘籍

------------------------------------------------------------------

 <el-form-item label="牛舍" prop="breedPenId">
        <el-select
       style="width:100%"
            v-model="form.breedPenId"
            placeholder="请输入"
            filterable
            multiple
            remote 
            clearable
            :loading="loading"
            :remote-method="selectBreedPenId"

          >
            <el-option
              v-for="item in selectBreedPenIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
      </el-form-item>

----------------------------------------------

selectBreedPenId(query) {
      if (query !== '') {
        this.selectBreedPenIdList = []
        this.loading = true
        SouGetPen(query).then(res => {
          this.loading = false
          this.selectBreedPenIdList = res.data.filter(item => {
            return item.name.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        })
      } else {
        this.selectBreedPenIdList = []
      }
    },