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-Cli如何在index.html中进行环境判断问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Vue中props报错问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
本文通过实例代码给大家介绍了Vue中实现拖放排序功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家学习介绍了Vue如何利用广度优先搜索实现watch（有意思），文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue2结合element-ui的gantt图实现可拖拽甘特图
因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,下面这篇文章主要给大家介绍了关于vue2结合element-ui的gantt图实现可拖拽甘特图的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue单应用在ios系统中实现微信分享功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论