element-ui&table 多选的筛选功能 不用点击筛选按钮，勾选就能触发搜索值

Posted 2023-03-17

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

优化成-----》勾选后+搜索（带勾选参数）

如果--------》勾选后+筛选做触发搜索事件用@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-triggerpointer-events: none;进行 ‘元素击穿‘’ （兼容性待考究）

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

element-ui中el-table的多选默认选中

参考技术A 上面写法在实际使用中发现了问题，就是只能选中默认的第一页，之后其他页的多选框没有选中；但是this.showSelectList中已经读取到从编辑接口获取到的数据。
解决办法：
在点击入口事件的时候，就开始多选绑定，绑定发生在调用接口之前。