ElementUI输入搜索框autocomplete的使用

最新推荐文章于 2024-12-11 17:29:31 发布

原创最新推荐文章于 2024-12-11 17:29:31 发布 · 2.8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客详细介绍了如何在 Vue.js 应用中利用 Element UI 的 Autocomplete 组件实现学院搜索功能。通过 `querySearch` 方法过滤数据，并在 `handleSelect` 事件中处理选中项的逻辑，确保数据绑定正确。关键点在于数据需包含 `value` 字段以供组件显示。此外，还强调了当数据不显示时的排查方法，即检查数据是否具有 `value` 属性。

看效果

HTML

<el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="((queryString,cb)=>{
   querySearch(queryString,cb,'collegeList')
  })"
            placeholder="全部学院"
            @select="handleSelect"
            @change='findApplyTeacher()'
          ></el-autocomplete>

querySearch (queryString, cb, options) {
      let data = this[options] // 下拉框数据
      var results = queryString
        ? data.filter(this.createFilter(queryString))
        : data
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (field) => {
        return (
          field.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        )
      }
    },

注意若下拉框数据不显示，查看数据是否有 value 字段，el-autocomplete显示的时候必须有value字段，可手动添加一个value属性,下拉框数组必须value做lable

 handleSelect (item) {
      if (item.insCode) {
        this.teacherData.deptCode = item.insCode // 绑定值传 name 属性对应值
      } else {
        this.teacherData.deptCode = -1
      }
    },

然后在@select="handleSelect"里面把绑定的值传给对应的值

标签