最近在做项目的时候遇到了需要运用树形表格。应为不是做Demo，所以是需要做成动态获取的，antd的模板列子
实现的效果图：
注意：我们使用的是两个不同的接口实现的动态树形数据的表格
实现的思路：
1，第一个接口只负责获取表格的父数据，也就是只获取 市场部，财务部，产品部的数据。
2，需要和后台商议好，如果父数据有子列表，那么就需要在给父数据的时候返回一个空数组，有这个空的数组才能实现表格前部的+号
在antd的这种表格里，只有当subList是一个数组的时候，才会显示为+号。antd的默认是children，可以通过childrenColumnName="subList"修改。
3，经过上面的操作，到这里页面上显示就和上面的图一样了，然后我们需要操作的就是通过点击+号，实现将通过第二个接口获取到的数据插入在对应的subList数组中。首先我们要在点击+号的onExpand={handleExpandChange}
handleExpandChange = (expanded, record) => {
if (!expanded) { return }
const id = record.departmentId
const { dispatch } = this.props
//异步请求数据
dispatch({
type: 'organization/listGetSub',
payload: {
departmentId: id
}
})
this.setState({
Cid: id
})
}
在handleExpandChange事件中只负责获取到点击的那一个父节点的id ，然后调用第二个接口获取到子列表的数据
4，数据都获取到了就要将获取到的数据插到对应的位置。使用到的是componentWillReceiveProps。
componentWillReceiveProps = (nextProps) => {
if (this.props.organization.organizationSubList !== nextProps.organization.organizationSubList) {//判断子列表的数据是否发生变化
if (nextProps.organization.organizationSubList) {
const { organizationList } = this.props.organization //第一个接口获取到的父表格的数据
const id = this.state.Cid //点击+号的id
const children = nextProps.organization.organizationSubList //获取到的子数据
const dataMap = (items) => { //将数据插入对应位置的操作
items.find((item) => {
if (item.departmentId === id) {
item.subList = children
return items
}
if (item.subList) {
dataMap(item.subList)
}
})
}
dataMap(organizationList)
this.setState({
organizationListData: organizationList
})
}
}
}
organizationListData是用来给表格传给dataSource的，organizationList是父接口获取到的数据，organizationSubList是点击+号获取到的子列表数据
效果图：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题：+WX：WAZJ-0508，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------
