filter-control是Bootstrap Table列级筛选最稳方案,支持input/select/datepicker三类控件,需正确配置filterData和filterControl:true;export导出应优先用xlsx引擎并设置PDF字体与边距;React项目应弃用原生JS插件,改用react-bootstrap-table2及配套filter组件。

filter-control:表格列级筛选最稳的落地方案
原生 Bootstrap Table 不支持按列实时筛选,filter-control 是社区验证最多、线上项目跑得最久的解决方案。它不侵入 DOM 结构,只靠 data-filter-control 属性声明控件类型,和 bootstrap-table 的初始化逻辑天然对齐。
常见错误现象:select 下拉框空数据、日期筛选后无响应 —— 多半是漏写了 filterData 或没启用 filterControl: true。
-
data-filter-control="input":纯文本模糊匹配,适合名称、编号类字段 -
data-filter-control="select":需配合data-filter-data="var:statusOptions"提前挂载 JS 对象到window -
data-filter-control="datepicker":依赖bootstrap-datepicker,必须确保其 CSS/JS 已加载且版本兼容(推荐 v1.9+) - 筛选状态默认不持久,加
filterControlSearchClear: true才能显示“清空”按钮
export:导出 Excel/PDF 时别碰原生 Blob 构造
export 插件封装了 tableExport.js 和 jsPDF 底层逻辑,但直接调用 $('#demoTable').tableExport({type: 'excel'}) 容易在 IE11 或低版本 Chrome 报 Failed to execute 'createObjectURL' on 'URL'。
真正能上线的写法是显式指定导出引擎:
- Excel 导出优先用
type: 'xlsx'(依赖 SheetJS),比csv更保格式,尤其含中文或公式时 - Pdf 导出务必加
pdfFontSize: 10和pdfMargin: [10, 10, 10, 10],否则默认字体小到打印不可读 - 服务端导出更可靠?插件本身不支持,得自己拦截
onExport事件,把getData()结果 POST 到后端
react-bootstrap:Bootstrap 5 项目里硬接原生 JS 插件=埋雷
如果你用的是 React + Bootstrap 5,bootstrap.bundle.min.js 和 $().modal('show') 这套写法在组件卸载后大概率导致内存泄漏,控制台静默不报错,但页面卡顿、事件重复绑定。
真实项目中该怎么做:
- Modal、Dropdown、Toast 等交互组件,一律用
react-bootstrap的Modal、Dropdown组件,通过show/onHideprops 控制状态 - 表格场景别纠结
bootstrap-table,react-bootstrap-table-2(注意不是带-v2后缀的老版)已内置分页、排序、选中行高亮 - 想加 filter-control 那种筛选?改用
react-bootstrap-table2-filter,它和react-bootstrap-table2的columns配置深度耦合,不用手动挂window.statusOptions
bootstrap-datepicker 的扩展别碰源码重写
很多团队遇到节假日禁用、范围联动、多语言切换等需求,第一反应是改 bootstrap-datepicker.js 源码。这会直接破坏 CDN 缓存、升级困难、且容易在 beforeShowDay 回调里写出内存泄漏(比如闭包引用了整个 Vue 实例)。
更可持续的做法是:
- 禁用日期用
datesDisabled数组,动态更新就重新调用setDatesDisabled()方法 - 双日期联动(如起止时间)不要监听
changeDate后手动 set,改用endDate/startDate选项双向约束 - 中文 locale 不要自己拼
language: 'zh-CN',直接引入bootstrap-datepicker.zh-CN.min.js并确保在主 JS 之后加载
最常被忽略的是时区处理:format: 'yyyy-mm-dd' 输出的是本地时间字符串,如果后端期望 UTC 时间,得在提交前用 moment(date).utc().format() 转换,插件本身不处理时区。











