在elementUI中,table表格组件的列本身有属性支持当前页的筛选功能,不过当列项较多时,并且列的label文字较长时,此时的筛选功能按钮(一个箭头向下的小按钮)不是很明显,对用户来说感观效果不是很好。此时,可以通过自定义表格头样式来提升感观效果,我们可以在表头中添加选择器,同样也可以实现当前页或者整个数据的筛选。下面说一下实现步骤:
(1)在指定的一列中设置自定义表头属性,通过slot属性值为header来设置,在template的插值中添加select选择器;
(2)通过样式覆盖的方式稍微调整一下select选择器的样式;此外,我们还可以通过el-option-group的方式来添加筛选功能的提示信息;
(3)对table数据进行数据绑定,通过select选择器的选择值不同进行筛选数据,此时需要通过计算的方式返回数据给table,原有的table数据不做改动,在一个函数中根据筛选条件对原有table数据进行筛选,将筛选后的数据放在一个临时的数组中,形成一份新的数据返回给table表格;此时,就可以达到筛选当前页的功能,要想对整个数据的筛选的话,那么就不要做两份数据的处理了,直接将筛选后的数据返回给table表格绑定的变量。