当前位置：首页 > news >正文

＜el-autocompoete＞下拉列表，点击选择之后的操作事件

news 来源：原创 2025/5/14 23:18:38

在 Element UI 或者 Element Plus 中，el-autocomplete 组件在用户点击下拉列表项进行选择后，可以通过监听 @select 事件来执行相应操作。下面分别给出 Element Plus（Vue 3）和 Element UI（Vue 2）的示例代码。

Element Plus（Vue 3）示例

<template>
  <div>
    <!-- 绑定数据源和选择事件 -->
    <el-autocomplete
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    >
    </el-autocomplete>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 输入框的值
const inputValue = ref('');

// 模拟搜索建议数据
const querySearch = (queryString, cb) => {
  const suggestions = ['Apple', 'Banana', 'Cherry', 'Date'];
  const results = suggestions.filter(item => item.toLowerCase().includes(queryString.toLowerCase()));
  cb(results);
};

// 处理选择事件
const handleSelect = (item) => {
  console.log('你选择了: ', item);
  // 这里可以添加其他操作，比如更新表单数据、发送请求等
};
</script>

代码解释
v-model：绑定输入框的值。
fetch-suggestions：用于获取搜索建议数据，这里模拟了一个简单的过滤逻辑。
@select：监听选择事件，当用户点击下拉列表中的某一项时，会触发 handleSelect 方法，并将选中的项作为参数传入。
handleSelect：处理选择事件的方法，在这个例子中，只是简单地将选中的项打印到控制台，你可以根据需求添加其他操作。
Element UI（Vue 2）示例

<template>
  <div>
    <!-- 绑定数据源和选择事件 -->
    <el-autocomplete
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    >
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 输入框的值
      inputValue: ''
    };
  },
  methods: {
    // 模拟搜索建议数据
    querySearch(queryString, cb) {
      const suggestions = ['Apple', 'Banana', 'Cherry', 'Date'];
      const results = suggestions.filter(item => item.toLowerCase().includes(queryString.toLowerCase()));
      cb(results);
    },
    // 处理选择事件
    handleSelect(item) {
      console.log('你选择了: ', item);
      // 这里可以添加其他操作，比如更新表单数据、发送请求等
    }
  }
};
</script>

代码解释
基本逻辑和 Element Plus 的示例类似，只是在 Vue 2 中使用 data 选项定义数据，使用 methods 选项定义方法。
通过监听 @select 事件，你可以在用户选择下拉列表项后执行自定义操作。在 Element UI 或者 Element Plus 中，el-autocomplete 组件在用户点击下拉列表项进行选择后，可以通过监听 @select 事件来执行相应操作。下面分别给出 Element Plus（Vue 3）和 Element UI（Vue 2）的示例代码。