本文摘自PHP中文网,作者尚,侵删。

首先是在这个是针对字段的,所以给cols新增一个配置项,来决定哪些列需要有过滤的功能,一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求,比如例子中的性别列还有职业列,id列这些的意义不大,当然也不是绝对的,有的就是需要呢。
所以新增了一个配置项filter: true/false/null
然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件
这个是主要的代码篇幅太长没办法全显示,简单介绍一下,就是利用table.eachCols去遍历表头,把需要添加图标的给加上图标就好了,注意这时候实际是不会生成我们后面点击看到的里面的复选的内容的。
实际这些都是靠后面的点击事件再做处理就好,在点击的事件中去遍历得到当前这一列的值的一个集合。
注意!这里是我们最终看到的内容的集合,而不是针对数据的,因为字段有templet可以进行转换,所以即使背后的值可能不一样最终显示出来的也有可能是一样的,这里应该是归纳为相同的一类。
然后点击这个筛选的时候都做了什么呢?
除了上面说了得到一个集合之外,就是利用这个集合作为一个table的数据,并且根据逻辑得到是否初始选中,然后layer去弹出一个弹框把表格渲染到里面去。
这里有一个关键的就是是否要多列筛选的支持,就是说可以先赛选一个列,然后点击另外一个列在前面筛选的前提下筛选这个列,目前是直接否决了这个需求,因为太复杂了而且很难解释。
因为他们之间都是会相互影响的,这边的列隐藏之后对于那边的列它可能会出现部分分类它的数据部分是显示的部分是隐藏的。
这时候怎么办?
相关阅读 >>
更多相关阅读请进入《layui》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者