bootstrap-table初始创建空表,拿到数据后再渲染数据

514 阅读1分钟

再一些业务场景中,我们可能会使用bootstrap-table去创建表格,如果数据是从远程拿,并且数据量较大时,如果等拿到数据渲染表格,页面就会显得突兀,这个时候,我们可以做一些优化。

  1. 将表格的绘制参数作为一个对象存储再一个 const 声明的变量里 const tableAPI = { data: [], height: 996, //etc},这一步指定了高度后,会使表格有一个固定的初始高度,而不至于塌陷,在填充数据后不显得突兀。
  2. 渲染空表:$('tableId').bootstrap-table(tableAPI);
  3. ajax数据请求后,将处理好的数据赋值给tableAPI里的data
  4. 再次渲染$('tableId').bootstrap-table(tableAPI);
  5. 4中还可使用$('tableId').bootstrap-table('load',data);的方式,这种加载方式还可用于在一些事件触发的表格重新加载中

还有一种方法是,将请求的接口写在tableAPIurl或者ajax参数项里