再一些业务场景中,我们可能会使用bootstrap-table去创建表格,如果数据是从远程拿,并且数据量较大时,如果等拿到数据渲染表格,页面就会显得突兀,这个时候,我们可以做一些优化。
- 将表格的绘制参数作为一个对象存储再一个
const声明的变量里const tableAPI = { data: [], height: 996, //etc},这一步指定了高度后,会使表格有一个固定的初始高度,而不至于塌陷,在填充数据后不显得突兀。 - 渲染空表:
$('tableId').bootstrap-table(tableAPI); - ajax数据请求后,将处理好的数据赋值给
tableAPI里的data。 - 再次渲染
$('tableId').bootstrap-table(tableAPI); - 4中还可使用
$('tableId').bootstrap-table('load',data);的方式,这种加载方式还可用于在一些事件触发的表格重新加载中
还有一种方法是,将请求的接口写在tableAPI的url或者ajax参数项里