layui框架的table字段筛选功能介绍(2)-木庄网络博客

唯一一个比较严谨的就是新增一种状态叫半选状态，但是实际应用场景应该遇到的不大，要实现却是相当费劲的，所以干脆不支持，这个在excel中好像也是这么个限定，不知道有没有记错。

最后是监听这个表格的复选事件，背后的实际的逻辑就是把对应的tr给显示或者隐藏。然后点击打开这个过滤的选项的时候也是根据table内部的tr的显示隐藏情况来决定是默认选中还是未选中。

然后因为图标在layui提供的里面找不到合适的，新增了一个样式文件来支持，注意加入：

存在问题：细心的应该会看到字段筛选之后下面的统计列没有更新，实际这个是不对的，筛选之后部分列不显示了，那么对应的统计应该是我们看到的列的统计，这个可以自己考虑下如何处理。

我的思路是封装出来一个针对表格统计的方法，可以对数据进行计算然后更新到对应的dom节点上，原始的table提供的统计最大的作用就是生成一个固定在下方的容器节点。

至于里面的内容实际是不要紧的，很多小伙伴会问layui能不能提供统计行的数据是后台返回的支持之类的问题，实际这些都可以在上面提到的这个封装方法里面去处理，也可以变得很自由，不仅仅是求和，还可以是各种各样的计算之类的，但是这个不是这个帖子的重点，后面再实现。

测试页面： https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled
gitee项目： https://gitee.com/sun_zoro/layuiTablePlug

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

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