最近在做项目的时候遇到了需要运用树形表格。应为不是做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,及时联系---------------------------------------------------------------------------------------------------------------------------------------------------