实现elementui搜索用户功能

实现elementui搜索用户功能,第1张

接口添加查询字段:

编写表单和搜索按钮:

Data中添加v-model对应的字段:

Methods中添加搜索方法:

点击搜索按钮的时候调用

1.在components下新建一个RemoteSearch.vue文件(或者新建一个文件夹,命名RemoteSearch,下面加入一个index.vue文件)(命名都是自己随意的)

2.RemoteSearch.vue文件内容如下

3.使用

起因--------》勾选后+筛选+搜索的用户体验有点差。。。

优化成-----》勾选后+搜索(带勾选参数)

如果--------》勾选后+筛选做触发搜索事件用@filter-change即可。

版本:elementui2.3.9版本

<el-table :data="data"  @header-click="headerClick"(其他属性未考究)

以上获取到整个对象,其中的属性值【filteredValue】为当前选中(无论是否点击筛选按钮)的值,给table+ref【filteredValue】值貌似打印不到正确值, el-table-column属性值【column-key】----column-key=="x1" 进行11对应,将获取的column值进行存储。

即【header-click当某一列的表头被点击时会触发该事件】,之后选取内容之后会修改到filteredValue内存地址的值,即可以获取到勾选项。

但有个小问题,当用header-click(event事件)鼠标处于下拉框的图标元素块内时,不触发该事件。so~

.xxxxxx .el-table__column-filter-trigger{pointer-events: none}进行 ‘元素击穿‘’ (兼容性待考究)

ps:非即时记录,可能存在问题,望指出~


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11585685.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存