el-select 选中值

时间: 2023-11-10 12:54:53 浏览: 118

【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解.docx

Element-ui 自带的两种远程搜索(模糊查询)用法讲解　　有一种查询叫做前端远程搜索、模糊查询。饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。模糊查询是谁来做？　　那么前端只需要把用户在输入框中的输入的关键字扔给后端，后端根据前端传过来的用户要查询的关键字，去数据库中进行模糊查询，查到的关联的数据扔给前端，前端拿到数据以后直接呈现给用户看到就行了。前端省事些　　正常情况下，模糊查询其实后端做会多一些，因为假设用户输入了一个“王”字，想查询所【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解在前端开发中，有时候我们需要实现一种称为前端远程搜索或模糊查询的功能。Element-ui，一个流行的Vue.js组件库，提供了两种实现这一功能的方法：一是使用`el-input`中的`el-autocomplete`，二是使用`el-select`配合`el-option`。这两种方式都能达到目的，但具体实现策略应与后端开发人员协商，以便优化性能和用户体验。 **方式一：el-autocomplete 远程搜索** `el-autocomplete`组件是Element-ui提供的一种自动补全组件，它支持远程搜索。在使用时，需要设置`filterable`和`remote`属性，以及`remote-method`方法。`remote-method`是一个回调函数，当用户在输入框中输入内容时，该函数会被调用，将输入值作为参数传递。同时，`loading`属性用于表示远程搜索时的加载状态。 ```html <template> <el-autocomplete v-model="value" filterable remote placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" ></el-autocomplete> </template> <script> export default { data() { return { value: '', loading: false, }; }, methods: { remoteMethod(query) { if (query !== '') { this.loading = true; // 模拟发送请求获取数据 const res = [ // 数据响应示例 ]; this.loading = false; // 对数据进行过滤，筛选出与查询关键词相关的选项 this.options = res.filter(item => item.label.includes(query)); } }, }, }; </script> ``` **方式二：el-select + el-option 远程搜索** `el-select`组件与`el-option`结合使用也可以实现远程搜索。与`el-autocomplete`类似，设置`filterable`和`remote`属性，并使用`remote-method`方法。`el-option`则用于定义下拉选项。 ```html <template> <el-select v-model="value" filterable remote placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </template> <script> export default { data() { return { options: [], value: '', loading: false, }; }, methods: { remoteMethod(query) { if (query !== '') { this.loading = true; // 模拟发送请求获取数据 const res = [ // 数据响应示例 ]; this.loading = false; // 对数据进行过滤，筛选出与查询关键词相关的选项 this.options = res.filter(item => item.label.includes(query)); } }, }, }; </script> ``` 在这两种方式中，通常由后端负责模糊查询，因为它可以更有效地处理大量数据，避免一次性传输所有数据给前端导致性能问题。前端仅负责将用户输入传递给后端，接收并显示后端返回的匹配数据。当然，这也取决于实际项目的需求和架构设计。在实际应用中，`remote-method`方法通常会替换为异步请求（如`axios`或`fetch`），以从服务器获取数据。同时，为了避免频繁请求，可以使用节流或防抖函数来优化搜索性能。 Element-ui提供的这两种远程搜索（模糊查询）方法为开发者提供了方便，可以根据项目需求选择适合的方式。无论选择哪种，都需要确保前端和后端之间的通信顺畅，以实现高效、准确的搜索体验。

el-select的选中值可以通过绑定的value属性来获取。当选中项发生变化时，可以通过监听change事件，获取到选中的值。另外，如果想展示选中项的其他key值，可以使用scoped slot的方式，在el-option中使用template来自定义展示的内容。具体使用方法可以参考Element UI的文档。

阅读全文

el-select 选中值

相关推荐

Vue 2.0 Element-UI el-select选择器显示问题及解决方案

Vue.js中避免嵌套el-select子级影响父级的选择

el-select 选中值后

el-select 选中值 过长时换行

怎么获取el-select选中的值

修改el-select选中后的el-opation样式

el-select选中某个选项后，禁用该选项，其他el-select不能选中该选项，取消选中该选项后，解除该选项的禁用

el-select选中不变

el-select选中事件

el-select选中触发事件

el-select选中后不变

el-select 选中字体修改

el-select 选中之前的事件

el-select选中的背景色

el-select选中后失去焦点

el-select选中后失焦

怎么获取el-select选中value

el-select中的el-option选中后显示的是图片

el-select选中后内容换行显示

最新推荐

【中国房地产业协会-2024研报】2024年第三季度房地产开发企业信用状况报告.pdf

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？

Android应用显示Ignaz-Taschner-Gymnasium取消课程概览

el-select 选中值过长时换行