鄂尔多斯市网站建设闵行网络推广公司

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

Element Plus（Vue 3）示例

<template><div><!-- 绑定数据源和选择事件 --><el-autocompletev-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-autocompletev-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）的示例代码。