zoukankan      html  css  js  c++  java
  • 用选择器代替表格列的筛选功能

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

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

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

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

  • 相关阅读:
    Java 和 DynamoDB
    关于Mongodb的全面总结
    utf8mb4 使用注意
    mysql 事务隔离讲的比较好的文章收藏。
    [mysql] 常用命令总结
    [JTA] Java事务api
    [Hibernate] Hibernate 参数设置一览表(转)
    Spring配置sessionFactory的几种常用方式
    [前端] org.apache.jasper.JasperException 页面有空引用
    [Hibernate] JPA与Hibernate的优缺点
  • 原文地址:https://www.cnblogs.com/bien94/p/12562535.html
Copyright © 2011-2022 走看看