elementui auto

ElementUI AutoComplete 组件使用指南

ElementUI 的 AutoComplete 组件是一个带输入建议的输入框，常用于搜索框或表单中需要自动补全的场景。

基本用法

通过 v-model 绑定输入值，fetch-suggestions 属性设置获取建议的方法：

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
></el-autocomplete>

data() {
  return {
    state: '',
    restaurants: []
  }
},
methods: {
  querySearch(queryString, cb) {
    var restaurants = this.restaurants;
    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    cb(results);
  },
  createFilter(queryString) {
    return (restaurant) => {
      return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    };
  }
}

自定义模板

可以自定义建议项的显示方式：

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
>
  <template #default="{ item }">
    <div class="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</el-autocomplete>

远程搜索

结合远程接口实现搜索建议：

querySearchAsync(queryString, cb) {
  axios.get('/api/search', { params: { q: queryString } })
    .then(response => {
      cb(response.data);
    });
}

属性配置

常用属性：

• value-key: 指定建议对象中用于显示的键名
• debounce: 输入去抖延迟，默认300毫秒
• trigger-on-focus: 是否在输入框聚焦时显示建议列表
• select-when-unmatched: 在输入框没有匹配项时是否允许选中输入内容

事件处理

常用事件：

• select: 点击选中建议项时触发
• change: 输入框值变化时触发
• blur: 输入框失去焦点时触发

handleSelect(item) {
  console.log(item);
}

样式定制

可以通过覆盖CSS类名来自定义样式：

• .el-autocomplete: 组件容器
• .el-autocomplete-suggestion: 建议列表
• .el-autocomplete-suggestion__wrap: 建议列表内容容器

与表单验证结合

可以配合Form组件进行验证：

<el-form :model="form" :rules="rules">
  <el-form-item prop="name">
    <el-autocomplete
      v-model="form.name"
      :fetch-suggestions="querySearch"
      placeholder="请输入名称"
    ></el-autocomplete>
  </el-form-item>
</el-form>

rules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ]
}