最近在做项目的时候遇到了需要运用树形表格。应为不是做Demo,所以是需要做成动态获取的,antd的模板列子
实现的效果图:
注意:我们使用的是两个不同的接口实现的动态树形数据的表格
实现的思路:
1,第一个接口只负责获取表格的父数据,也就是只获取 市场部,财务部,产品部的数据。
2,需要和后台商议好,如果父数据有子列表,那么就需要在给父数据的时候返回一个空数组,有这个空的数组才能实现表格前部的+号
在antd的这种表格里,只有当subList是一个数组的时候,才会显示为+号。antd的默认是children,可以通过childrenColumnName="subList"修改。
3,经过上面的操作,到这里页面上显示就和上面的图一样了,然后我们需要操作的就是通过点击+号,实现将通过第二个接口获取到的数据插入在对应的subList数组中。首先我们要在点击+号的onExpand={handleExpandChange}
handleExpandChange = (expanded, record) => {