• 用选择器代替表格列的筛选功能


      在elementUI中,table表格组件的列本身有属性支持当前页的筛选功能,不过当列项较多时,并且列的label文字较长时,此时的筛选功能按钮(一个箭头向下的小按钮)不是很明显,对用户来说感观效果不是很好。此时,可以通过自定义表格头样式来提升感观效果,我们可以在表头中添加选择器,同样也可以实现当前页或者整个数据的筛选。下面说一下实现步骤:

      (1)在指定的一列中设置自定义表头属性,通过slot属性值为header来设置,在template的插值中添加select选择器;

      (2)通过样式覆盖的方式稍微调整一下select选择器的样式;此外,我们还可以通过el-option-group的方式来添加筛选功能的提示信息;

      (3)对table数据进行数据绑定,通过select选择器的选择值不同进行筛选数据,此时需要通过计算的方式返回数据给table,原有的table数据不做改动,在一个函数中根据筛选条件对原有table数据进行筛选,将筛选后的数据放在一个临时的数组中,形成一份新的数据返回给table表格;此时,就可以达到筛选当前页的功能,要想对整个数据的筛选的话,那么就不要做两份数据的处理了,直接将筛选后的数据返回给table表格绑定的变量。

  • 相关阅读:
    剑指offer---链表中倒数第k个结点
    剑指offer---反转链表
    剑指offer---从尾到头打印链表
    数据结构---链表ADT C++实现
    ubuntu解压zip文件出现乱码情况解决方法
    Ubuntu终端常用的快捷键(转载)
    requsets模块的学习
    爬虫的基本知识
    谈谈我们对userAgent的看法,为什么爬虫中需要userAgent?
    git的基本使用
  • 原文地址:https://www.cnblogs.com/bien94/p/12562535.html
Copyright © 2020-2023  润新知