通过点击+号请求接口实现展示二级目录

父组件

import React, { PureComponent } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Row, Col, Button, Input, DatePicker,Table,Popconfirm,Modal,ScriptList} from 'antd';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import Expand from '../../../components/Expand/Expand';
import Link from 'umi/link';
import moment from 'moment';
const sstyle = {
    display:'none',
};
const expandedRowRenders = record => 

{record}

; // class index extends PureComponent { constructor(props) { super(props); this.state = { expandVisible: {}, expandedRowRenders, expandedData:{}, visibles:false, record:{}, }; }; expandedRowRenderFile=(expanded,record)=>{ // 点击展开 console.log(record); // 点开那条的数据 if(expanded){ const { dispatch } = this.props; dispatch({ type: 'help/opensubhelpListFetch' ,// 接口 payload: record.id, // 把值传给model }).then(result => { console.log(result); // 返回的数据 const res = { ...this.state.expandedData, // [record.id]: result.rets,// 返回的数据赋值给点击的这个ID }; this.setState({ expandVisible:{ // 更新到state ...this.state.expandVisible, [record.id]: true, }, subTabData:res, //注意,用key对应value的形式来标识每个扩展行的子组件,不然,一个请求,所有数据又变成一个了...访问的时候,根据key来访问 expandedRowRenders: { ...this.state.expandedRowRenders, [record.id]: // 组件 }, }); }); }else{ this.setState({expandVisible:{ ...this.state.expandVisible, [record.title]: false, }}); } } render() { const { visibles, record } = this.state; const { help ,loading} = this.props; const dataSource = Array.isArray(help.helpList.rets) !== null ? help.helpList.rets : []; let pagelist = this.props.help.helpList; let pagination =''; if( pagelist === undefined){ pagination={ limit:10, page:1, total:'' }; }else{ pagination = { limit:pagelist.limit, page:pagelist.page, total:pagelist.total }; } const {getFieldDecorator} = this.props.form; const columns = [ { title: '目录', dataIndex: 'title', }, { title: '时间', dataIndex: 'date_created', }, { title: '操作', dataIndex: 'operation', }, ]; return (
{ return record.id; }} bordered pagination={false} onExpand={this.expandedRowRenderFile.bind(this)} // 点击展开 dataSource={dataSource} columns={columns} expandedRowRender={(record) => this.state.expandVisible[record.id] === true ? this.state.expandedRowRenders[record.id] : true}, // 渲染数据 /> ); } } index = Form.create({})(index); export default connect(({ help ,loading}) => ({ help, loading: loading.models.help, }))(index);

二级菜单子组件

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {Table,Popconfirm} from 'antd';
import { formatMessage } from 'umi/locale';
import Link from 'umi/link';
class Expand extends PureComponent {
    render() {
        const { visible, expandRecord, dataonedata} = this.props; // 
        const columns = [
        {
            title:'标题',
            dataIndex: 'title',
            width:'52.2%'
        },
    ];
        return (
            
{ return record.id; }} pagination={false} // 不显示分页 dataSource={dataonedata[expandRecord.id]} // 子项展出的内容,expandRecord.id(父级ID),父级ID对应子级 columns={columns} showHeader={false} // 不显示标题 /> ); } } export default connect(({ help }) => ({ help }))(Expand);
通过点击+号请求接口实现展示二级目录_第1张图片
image.png

你可能感兴趣的:(通过点击+号请求接口实现展示二级目录)