简介
数据表格主要用于数据填写和展示各类表格数据。
表格数据绑定
目前表格支持远程数据和本地数据共计3种方式去绑定数据。
-
远程数据中,可以通过数据源请求表格数据并绑定,但其返回结果必须要是数组。
-
使用远程请求去获取表格数据,远程请求需要的数据格式为{data: data, total: total},可以是对象,也可以是promise,需要分页的时候,可以在远程请求的参数中获取到分页的当前参数。
-
通过变量绑定去直接实现本地数据的绑定
说明三种方法各有优劣,数据源方案最方便,本地数据可以实现本地分页等操作,远程请求会更加灵活,而且如果需要在事件中对表格进行刷新,目前只有远程请求方案支持refresh方法暴露
表格列自定义修改
简单的表格数据展示可以直接使用表格列的数据字段绑定,数据的处理也可以在数据传入表格前处理完成,可以拖拽对列进行排序,前面的勾选为列的显示隐藏。
如需进行一些复杂的自定义渲染,可以使用表格的自定义渲染功能
对于一些层级不一样的数据,比如说表格数组返回的某个项有个值是个对象,我需要取到对象里面的内容作为渲染数据,可以用以下方法解决
表格的选中
表格行选中开启后,需要表格数据中存在唯一的rowKey,默认是ID,否则选项不生效,表格选中数据可以通过两种方式获取,一种是在事件rowSelection.onChange中获取选中行数据手动存入
此外,也可以通过可控方式直接控制表格的选中行,这样可以给表格设置默认选中的值
表格行展开
表格行展开一般用在树状结构,可以通过开启行展开,渲染需要展开的数据内容
此外,还可以通过配置可展开去控制行是否能展开,可以配置expandable.onExpand去监听行展开关闭事件的触发
表格事件
- onChange事件绑定
- rowSelection.onChange事件绑定
- expandable.onExpand事件绑定
表格实例属性与方法
表格实例支持refresh方法,但这个方法当前只有远程请求模式下才会生效,数据源模式和本地表格不支持,在表格使用远程请求的时候,可以在事件中直接找到该事件进行触发。获取到表格实例后,可以获取其data,即表格传入的数据,columns,即表格的列配置。