elementui中el-input回车搜索实现示例
更新时间：2021年01月29日 11:33:19 作者：水冗水孚
这篇文章主要介绍了elementui中el-input回车搜索实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
问题描述
上一篇文章中讲述了模糊查询关联搜索，不过模糊查询关联搜索一般来说都是用户输入某个关键字以后，关联相关的数据呈现，并供用户选择一条（当然el-select中也自带多选功能，见下图，不过有些场景不太适用），用户选择了某一条以后，展示这一条数据展示给用户看；但是有些情况就是用户想直接看到所有关联的数据都直接呈现在页面上。比如用户输入了“王”这个字以后，要直接所有的与“王”字有关联的数据都在页面铺开来供用户选择，这个时候，使用如下方法思路会更加适用一些：通过给el-input绑定enter回车事件，用户在input框输入内容以后，直接敲下回车键，就发请求获取后台所有的关联的数据，然后渲染呈现在页面上，用户想看谁就点击谁。当用户把input框的内容全部删除完以后，当input内容为空的时候，在发请求回到初始的数据状态。
el-select多选功能效果图
el-input绑定回车代码
html部分
<template> <div id="app"> <!-- 使用vue自带的绑定回车事件 使用trim修饰，不让用户乱输入空格 --> <el-input v-model.trim="searchData" @keyup.enter.native="search" ></el-input> </div> </template>
js部分
<script>
export default {
name: "app",
data() {
return {
searchData: "",
};
},
watch:{
// 监听input输入框，若没东西了，就回复默认状态
searchData:function(newnew,oldold){
if(newnew == ""){
// 发请求回到初始列表数据状态
console.log("搜索框没东西了，回复初始状态");
}
}
},
methods: {
search(){
// 控制一下，如果用户没输入东西就不去搜索
if(this.searchData == ""){
return
}else{
// 把searchData带着，发请求获取有关联的数据并呈现在页面中
console.log("带着关键字交给后端搜索",this.searchData);
}
}
},
};
</script>
总结
其实写代码最重要的就是思路，只要有思路了，就相当于有方向了，基本上都可以解决问题的。上述代码主要说的是思路，实现需求灵活变通一下即可。
到此这篇关于elementui中el-input回车搜索实现示例的文章就介绍到这了,更多相关element el-input回车搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue 动态添加路由及生成菜单的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
今天小编就为大家分享一篇vue动态删除从数据库倒入列表的某一条方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容，有需要的朋友们可以学习参考下。2020-01-01
这篇文章主要介绍了h5 vue引入微信sdk 实现分享朋友圈，分享给朋友，获取地理位置功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了Vue 3中常用的生命周期钩子和监听器的操作方法,分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了基于VUE的v-charts的曲线显示功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题,这篇文章主要给大家介绍了关于在vue2中使用weixin-js-sdk的详细步骤,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue实现用v-bind给src和href赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
如何修改element-ui中tree组件的icon图标(小白都会的前端技能)
这篇文章主要给大家介绍了关于如何修改element-ui中tree组件的icon图标的相关资料,本文介绍的是小白都会的前端技能,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下2024-01-01
最新评论