antdsign Table—嵌套子表格

解决通过ajax请求的数据嵌套子表格展开显示时，无法独立显示。

      最近有写一个嵌套子表格的项目，主要是根据表格行的信息获取该行下级的详细信息并最为表格输出展示。第一种情况展开的子表格没有自己的state完全根据props去获取自己的数据并展示。

 const expandedRowRender = (record, index, indent, expanded) => {const columns = [  ];//ajax获取dataconst data = [];return <Table columns={columns} dataSource={data} pagination={false} />;};

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'><Tablecolumns={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'><Tablecolumns={this.columns}onChange={this.onTableChange}pagination={paginationProps}dataSource={this.state.data} /></div></Spin>)}
}

这里代码是根据我运行的改成的伪代码并不能运行，借鉴一下就好
第一次写文章，如有不足，多多包涵

antd 嵌套子表格相关推荐

antd 嵌套子表格_大型前端项目架构优化探索之路腾讯文档表格
腾讯文档表格是一个非常复杂的业务,它实现了传统 excel 的大部分核心功能,包括函数计算.条件格式.图表.智能分列等:除此之外还支持高效的多人协同编辑:它的代码量百万级别,启动也流程多达十几步.在前 ...
antd react table 嵌套子表格例子
antd react table 嵌套子表格例子 import { Button, TableColumnsType } from 'antd'; import { Badge, Dropdown, ...
怎么才能让Antd中的嵌套子表格渲染不一样的内容
目录一.子表格与父表格的数据存储在一起方式一:Function(record, index, indent, expanded):VNode 方式二:#expandedRowRender=&quo ...
AntDesignVue中Table表格嵌套子表格expandedRowRender插槽用法
在一次项目中使用antdVue表格嵌套子表格时,出现了父表格下子表格数据覆盖的情况,错误情况就不复现了,直接上正确代码需求:根据父表格id来获取子表格数据还是说下错误的情况吧,这个时候可以正常取到 ...
Vue + ant design 实现嵌套子表格
Table - 嵌套子表格一.效果展示二.代码实现一.效果展示功能1:添加主表格一行功能2:添加某个子表格一行功能3:子表格数据的异步加载二.代码实现 <template>& ...
树形数据展示 - 嵌套子表格
一.目标样式父表格嵌套子表格,子表格默认折叠,点击父表格左侧加号可以展开父表格显示对应的子表格,展示每行数据更详细的信息目标效果二.问题样式 (一)问题说明父表格展开后,子表格展示成功,但是子 ...
ant-design嵌套子表格实现每次只展开一个子表格（点击新的子表格收起原展开的子表格）
又遇到问题,记录一下吧,希望给同踩坑的小白一些帮助首先功能需求:点击新的子表格收起原展开的子表格解决问题的关键点:重新set expandedRowKeys的值这个解决问题的点大家都能想到,主 ...
ant里面table嵌套子表格_ElementUI el-table行内编辑验证，动态增减行
通过el-from验证动态表格的行内输入 eltable动态增加行或者删除行只需要控制对应的数组就可以实现,行内的验证可以使用el-form的表单验证,直接上代码: el-form嵌套table f ...
自定义antd table子表格的展开和收起，一键展开收起
效果: 代码: import React from 'react'; import {Table} from 'antd'; const key = []; // 定义一个空的数组. export d ...

antd 嵌套子表格

antdsign Table—嵌套子表格

解决通过ajax请求的数据嵌套子表格展开显示时，无法独立显示。

antd 嵌套子表格相关推荐

最新文章

热门文章