美文网首页
element-ui&table 多选的筛选功能 不用点击筛选按

element-ui&table 多选的筛选功能 不用点击筛选按

作者: dontmis | 来源:发表于2020-05-12 10:37 被阅读0次

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

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

    如果--------》勾选后+筛选做触发搜索事件用@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:非即时记录,可能存在问题,望指出~

    相关文章

      网友评论

          本文标题:element-ui&table 多选的筛选功能 不用点击筛选按

          本文链接:https://www.haomeiwen.com/subject/mqmfwhtx.html