Vue3+Element-Plus 实现表单中搜索功能 三五

1. 当用户在表单搜索框中，输入要搜索的用户名，点击搜索按钮后，查找到相对应的用户数据

 2. 实现搜索功能的步骤

2.1  首先，使用v-model 指令，将文本输入框的数据与 data 中的数据做双向绑定

 2.2  其次，为搜索按钮绑定单击事件，并调用事件函数。只要点击按钮，就发起一次查询请求。

2.2  接着，优化文本输入框，在文本框尾部添加清除功能，当用户点击清除后，文本框数据被重置（清空），同时触发一个事件，查询出所有的账户信息。

• 通过 Input 事件 ，给当前文本框添加 clearable 属性来实现在文本框尾部添加清除小按钮功能

•  代码中使用，例如:

• 效果 

•   接着，clearable 属性 添加完成后，当点击清除按钮后，重置文本输入框数据的同时，重新查询出所有用户数据。需要通过 Input 事件 来实现

•  所以，只要单击了清空按钮，就会立即调用 clear 事件。在 clear 事件中，调用查询数据函数，就能实现清空文本框数据后，自动查询出所有用户数据的功能

Input 输入框 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/input.html#input-%E4%BA%8B%E4%BB%B6

 3. 页面代码

3.1 Users.vue 组件代码

以上出自：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=51&spm_id_from=pageDriver