antd 嵌套子表格
antdsign Table—嵌套子表格
解决通过ajax请求的数据嵌套子表格展开显示时，无法独立显示。
最近有写一个嵌套子表格的项目，主要是根据表格行的信息获取该行下级的详细信息并最为表格输出展示。
第一种情况展开的子表格没有自己的state完全根据props去获取自己的数据并展示。
const expandedRowRender = (record, index, indent, expanded) => {
const columns = [ ];
//ajax获取data
const data = [];
return
;
};
expandedRowRender 根据这个函数获取当前展开行的信息，从而去请求数据展示，各个展开的子表格不会有影响，但如果分页信息或者数据，是以当前组件的state存储时就会有问题。展开一行获取数据时其他被展开的子表格的信息也会被修改，因为这些表格是共用的一个状态，有三种解决办法，
其一： 网上有的解决办法这里就不多说了直接上链接
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z3y3m3/article/details/86602192
————————————————
版权声明：本文为CSDN博主「z3y3m3」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/z3y3m3/article/details/86602192
其二： 同时只允许一行展开，但这样会限制需求，也不讨论
其三： 将子表格作为一个单独的组件抽离出来拥有自己的状态，这样每个子表格就不会相互影响
贴代码
父组件
import React, { Component } from 'react'
import { Table, Icon, Spin, Tooltip } from 'fish'
import request from '@ae.sdp.nd/core/shared/request'
// import { env } from '~/constants'
import moment from 'moment'
import ExpandTable from './ExpandTable'
export default class ComponentParticles extends Component {
constructor (props) {
super(props)
this.state = {
app_id: '',
date: this.props.date,
searchData: { // 表格数据查询参数
current: 1,
columnKey: 'sum_date',
order: 'asc',
pageSize: 10
},
data: [],
total: 0,
loading: false
}
this.columns = []
}
componentWillReceiveProps (nextProps) {
if (nextProps.date[0].valueOf() !== this.props.date[0].valueOf() || nextProps.date[1].valueOf() !== this.props.date[1].valueOf() || nextProps.clickedComp !== this.props.clickedComp) {
this.getData(nextProps.date, nextProps.clickedComp)
}
}
componentDidMount () {
this.getData(this.props.date, this.props.clickedComp)
}
getData (date, clickedComp) {
this.setState({ loading: true })
const config = {}
request(config).then(res => {
const data = []
res.items.map(item => {
data.push({
...item,
key: item.app_id
})
})
this.setState({
data,
total: res.total,
loading: false
})
})
}
expandedRowRender = (expandedRows) => {
return <ExpandTable date={this.props.date} record={expandedRows} />
}
onTableChange = (page, filter, sorter) => {
this.setState({
searchData: {
current: page.current,
columnKey: sorter.columnKey,
order: sorter.order === 'ascend' ? 'asc' : 'desc',
pageSize: page.pageSize
}
}, () => {
this.getData(this.props.date, this.props.clickedComp)
})
}
render () {
const paginationProps = {
current: this.state.searchData.current,
defaultPageSize: this.state.searchData.pageSize,
total: this.state.total
}
return (
<Spin tip='加载中...' spinning={this.state.loading}>
<div className='Modal'>
<Table
columns={this.columns}
expandedRowRender={this.expandedRowRender}
onChange={this.onTableChange}
pagination={paginationProps}
dataSource={this.state.data} />
</div>
</Spin>
)
}
}
子组件 ExpandTable
import React, { Component } from 'react'
import { Table, Spin } from 'fish'
import request from '@ae.sdp.nd/core/shared/request'
// import { env } from '~/constants'
import moment from 'moment'
export default class ComponentParticles extends Component {
constructor (props) {
super(props)
this.state = {
searchData: { // 表格数据查询参数
current: 1,
columnKey: 'sum_date',
order: 'asc',
pageSize: 10
},
data: [],
total: 0,
loading: false
}
this.columns = []
}
componentWillReceiveProps (nextProps) {
if (nextProps.record !== this.props.record) {
this.getData(nextProps.date, nextProps.record)
}
}
componentDidMount () {
this.getData(this.props.date, this.props.record)
}
getData = (date, record) => {
this.setState({ loading: true })
const config = {}
request(config).then(res => {
const data = []
res.items.map((item, index) => {
data.push({
...item,
key: index + this.props.record.app_id
})
})
this.setState({
data,
total: res.total,
loading: false
})
})
}
onTableChange = (page, filter, sorter) => {
this.setState({
searchData: {
current: page.current,
columnKey: sorter.columnKey,
order: sorter.order === 'ascend' ? 'asc' : 'desc',
pageSize: page.pageSize
}
}, () => {
this.getData(this.props.date, this.props.record)
})
}
render () {
const paginationProps = {
current: this.state.searchData.current,
defaultPageSize: this.state.searchData.pageSize,
total: this.state.total
}
return (
<Spin tip='加载中...' spinning={this.state.loading}>
<div className='Modal'>
<Table
columns={this.columns}
onChange={this.onTableChange}
pagination={paginationProps}
dataSource={this.state.data} />
</div>
</Spin>
)
}
}
这里代码是根据我运行的改成的伪代码并不能运行，借鉴一下就好
第一次写文章，如有不足，多多包涵
版权所有，翻版必究哦！哈哈哈哈哈哈哈