undefinedfix
Sign in

If you insert a sub table and click the parent table, all the data in the sub table will be the same??

SSaaml edited in Wed, 17 Aug 2022

Using ant framework, to embed a sub table in a table, the user needs to asynchronously request the background data to fill in the content of the sub table after clicking the + icon in front of the parent table. When you click on the parent table, all the data in the child table will become the same. Note: the data in the parent table is an interface, and the data in the child table is another interface. They are not in the same piece

clipboard.png

The data format returned by the parent table in the background is:

{
    "instContractListQueryRequest":null,
    "success":true,
    "status":"success",
    "resultCode":"",
    "resultMsg":"",
    "result":{
        "pageInfoVO":{
            "currentPage":1,
            "itemsPerPage":10,
            "totalItems":620,
            "totalPages":62
        },
        "resultObj":[
            {
                "auditNo":"",
                "auditStatus":"",
                "auditUrl":"",
                "contractBatchAuditDate":"",
                "contractBatchCreateDate":"",
                "contractBatchNo":"180903556221",
                "contractBatchStatus":"",
                "contractBatchUniqueNo":"180903556221",
                "creator":"",
                "effectiveDate":"",
                "gmtCreate":null,
                "gmtModified":null,
                "instAlipayAccountNo":"[email protected]",
                "instShortName":"中国光大银行浙江分行",
                "invalidDate":"",
                "memo":"",
                "solutionName":"借呗机构方案"
            }
           ]
      }
}

Data format returned by sub table in background:

{
    "instContractListQueryRequest":null,
    "success":true,
    "status":"success",
    "resultCode":"",
    "resultMsg":"",
    "result": {
    "pageInfoVO": {
      "totalItems": 620,
      "totalPages": 62,
      "currentPage": 2,
      "itemsPerPage": 10
    },
    "resultObj": [
     {
      "contractBatchUniqueNo": "180919591049",
      "contractBatchNo": "180919591049",
      "instShortName": null,
      "solutionName": null,
      "auditStatus": "P",
      "memo": null,
      "contractBatchStatus": "已生效",
      "auditNo": null,
      "auditUrl": "http://antprocess.stable.alipay.net/ticket/dispatch/antprocess-sign_1_180919591049?type=detail",
      "contractBatchCreateDate": null,
      "contractBatchAuditDate": null,
      "creator": null,
      "instAlipayAccountNo": null,
      "effectiveDate": "2018-09-19 12:04:50",
      "invalidDate": "9999-12-31 23:59",
      "contractDisplayVOList": null,
      "gmtCreate": null,
      "gmtModified": null
    }
    ]
  }
}

Main code: (omit irrelevant code) table.js



import React, { PureComponent } from '@alipay/bigfish/react';
import { Table, Badge } from '@alipay/bigfish/antd';
import { Link } from '@alipay/bigfish/sdk/router';
import styles from './index.less';
import { connect } from '@alipay/bigfish/sdk';



@connect(state => ({
  conQuerySon: state.contractQuerySon,

})) 

class ContractTable extends PureComponent {

  handleTableExpand = (expended, record) => {
    record.isShow = expended ? '收起' : '展开';

    const { dispatch } = this.props;
 
    if (expended === false) {
      console.log("合并!");
      
    } else {
      console.log("展开!");
      dispatch({
        type: 'contractQuerySon/fetchConQuerySon',
        payload: {
          contractBatchUniqueNo: record.contractBatchUniqueNo,
        },
      });
    }
  }
  

  render() {
    const { loading } = this.props;
    const { conQuerySon } = this.props; 

    const expandedRowRender = (expended, record) => {

      const dataSon = conQuerySon.data.contractListSon;  // dataSon子表格数据
    
      const columns = [ ... ];
  
      return (
        <Table
          columns={columns}
          dataSource={dataSon}
          pagination={false}
          rowKey={record => (record.contractBatchNo)}
        />
      );
    };
    const columns = [ ... ];

    const data = this.props.data.contractList; // data父表格的数据

    return (
      <Table
        className="components-table-demo-nested"
        columns={columns}
        expandedRowRender={expandedRowRender}
        dataSource={data}
        loading={loading}
        pagination={true}
        rowKey={record => (record.contractBatchUniqueNo)}
        onExpand={this.handleTableExpand}
       
      />
    );
  }
}
export default ContractTable;

Model layer:


import { message } from '@alipay/bigfish/antd';
import { queryContractBatchListDetail } from '../service/api';

export default {
  // 命名空间
  namespace: 'contractQuerySon',

  // 状态对象
  state: {
    data: {
      contractListSon: [],
    },
  },

  effects: {

    * fetchConQuerySon({ payload }, { call, put }) {
  
      const response = yield call(queryContractBatchListDetail, payload);
   
      if (response !== null && response.success === false) {
        message.error(response.resultMsg);
      } else {
        yield put({
          type: 'saveSon',
          payload: response.result,
        });
      }
    },
  },

  reducers: {

    saveSon(state, action) {
      return {
        ...state,
        data: {
          ...state.data,
          contractListSon: action.payload,
        },
      };
    },
  },
};







3 Replies
Bricky
commented on Wed, 17 Aug 2022

An object stores the data of all secondary tables

 // model层 
  stateData: {
     '1': {list:[], pagination:{page: 1, size: 10, total: 20}}
     '2': {list:[], pagination:{page: 1, size: 10, total: 20}}
  }

On the page

<Table
  onExpand={(expended, record) => {
    const {stateData} = this.props;
    const {list=[], pagination} = stateData[record.ID];
    ...// 省略代码
    return (
        <Table
          columns={columns}
          dataSource={list}
          pagination={...pagination}
          rowKey={d => (d.contractBatchNo)}
        />
      );
 }}
/>
    
mmeisner
commented on Wed, 17 Aug 2022

You can set only one to expand and the rest to close

ProWeb365
commented on Wed, 17 Aug 2022

Correct implementation effect: the feeling can also be optimized, interested students can directly say your ideas in the answer

Self Union https://blog.csdn.net/z3y3m3/... The effect is achieved

Component file index.js

clipboard.png

DVA model layer:

clipboard.png

Code block: index . js

import React, { PureComponent } from '@alipay/bigfish/react';
import { Table, Badge } from '@alipay/bigfish/antd';
import { Link } from '@alipay/bigfish/sdk/router';
import styles from './index.less';
import { connect } from '@alipay/bigfish/sdk';

@connect(state => ({
  conQuerySon: state.contractQuerySon,
}))

class ContractTable extends PureComponent {
  state = {
    subTabData: {
    }
  }
 
  handleTableExpand = (expended, record) => {
    record.isShow = expended ? '收起' : '展开';
    const params = record.contractBatchUniqueNo;
    if ( expended === false ) {
      console.log('合并');
      this.setState({
        subTabData: {
          ...this.state.subTabData,
          [record.contractBatchUniqueNo]: [] ,
        }
      });
    }else{
      console.log('展开');
      const { dispatch } = this.props;
      dispatch({
        type: 'contractQuerySon/fetchConQuerySon',
        payload: {
          contractBatchUniqueNo: params
        },
        callback: ( res ) => {
          this.setState({
            subTabData: {
              ...this.state.subTabData,
              [record.contractBatchUniqueNo]: res ,
            }
          });
          console.log("返回数据(PlanList):" + JSON.stringify(this.state.subTabData));
        }
      });
    }
  }
  
  render() {
    const { loading } = this.props;

    const expandedRowRender = (expended, record) => {
      const list = this.state.subTabData[expended.contractBatchUniqueNo];
      console.log('list: ', list);
      if (list === undefined) {
        debugger;
        return [];
      }

      const columns = [ ... ];

      return (
        <Table
          columns={columns}
          dataSource={list.result}
          pagination={false}
          rowKey={record => (record.contractBatchNo)}
        />
      );
    };
    const columns = [ ... ];

    const data = this.props.data.contractList;
    return (
      <Table
        className="components-table-demo-nested"
        columns={columns}
        expandedRowRender={expandedRowRender}
        dataSource={data}
        loading={loading}
        pagination={true}
        rowKey={record => (record.contractBatchUniqueNo)}
        onExpand={this.handleTableExpand}
      />
    );
  }
}
export default ContractTable;

DVA model layer code block:

import { queryContractBatchListDetail } from '../service/api';

export default {
  // 命名空间
  namespace: 'contractQuerySon',

  // 状态对象
  state: {
    data: {
      contractListSon: [],
    },
  },

  effects: {
    * fetchConQuerySon({ payload, callback }, { call, put }) {
      yield put({
        type: 'changeLoading',
        payload: true,
      });

      const response = yield call(queryContractBatchListDetail, payload);
      if (response !== null && response.success === false) {
        message.error(response.resultMsg);
      } else {
        yield put({
          type: 'saveSon',
          payload: response.result,
        });

        if ( callback && typeof callback === 'function' ) {
          callback( response ); // 返回结果
        }

      }
  },

  reducers: {
    saveSon(state, action) {
      const { contractListSon } = state; 
      return {
        ...state,
        data: {
          ...state.data,
          contractListSon: action.payload,  
        },
      };
    },
};
lock This question has been locked and the reply function has been disabled.