当前位置: 首页 > Web前端 > vue.js

el-inputentersearchinelementui范例

时间:2023-03-31 21:05:06 vue.js

问题描述上一篇文章描述了模糊查询相关搜索,但是模糊查询相关搜索一般是在用户输入关键字后,呈现相关数据,并供用户选择一个(当然el-select也有多选功能,见下图,但有些场景不适用),用户选中某一项后,显示这一项的数据,供用户查看;但在某些情况下,用户希望看到直接呈现在页面上的所有关联数据。例如,用户输入“王”字后,所有与“王”字相关的数据都应该铺开在页面上,供用户选择。这时候下面的方法会比较适用:通过给el-输入绑定enter事件。用户在输入框中输入内容后,直接按下回车键,然后在后台发送请求获取所有关联数据,然后渲染呈现在页面上。用户可以点击他想看到的任何人。用户删除输入框所有内容后,当输入内容为空时,发送请求返回初始数据状态。el-select多选功能效果图el-input绑定回车码html部分js部分综上所述,写代码最重要的是思路。只要有了想法,就相当于有了方向,基本上上面就可以解决问题了。上面的代码主要讲了思路,实现需求灵活一些就可以了。