ant design table左侧_ant.design组件Table嵌套子表格

import React, { Component } from 'react'

import { Table } from 'antd';

const dataSource = [{

busi_name: "指标用户1103 ",

prov_name: "西藏",

task_id: 7911,

item: [{

busi_name: "指标用户1103 ",

log_id: 8955,

prov_name: "西藏",

}, {

busi_name: "指标用户1103 ",

log_id: 8826,

prov_name: "西藏",

}]

}, {

busi_name: "安",

prov_name: "北京",

task_id: 8189,

item: [{

busi_name: "安",

log_id: 9109,

prov_name: "北京",

}]

}];

const columns = [

{ title: '省份名称', dataIndex: 'prov_name', key: 'prov_name', align: "center", width: 100, ellipsis: true }, // "北京"

{ title: '业务名称', dataIndex: 'busi_name', key: 'busi_name', align: "center", width: 100, ellipsis: true }, // "测试——陆雪琪 新建指标zx "

{ title: '业务类型', dataIndex: 'proc_name', key: 'proc_name', align: "center", width: 100, ellipsis: true }, // "批量指标(月)"

];

export class index extends Component {

render() {

const expandedRowRender = (record) => {

const columns = [

{ title: 'prov', dataIndex: 'prov_name', key: 'prov_name', align: "center", width: 100, ellipsis: true },

{ title: 'Date', dataIndex: 'busi_name', key: 'busi_name', align: "center", width: 100, ellipsis: true },

{ title: 'Name', dataIndex: 'proc_name', key: 'proc_name', align: "center", width: 100, ellipsis: true },

];

return

;

};

return (

columns={columns}

dataSource={dataSource}

rowKey={record => record.task_id}

expandedRowRender={record => expandedRowRender(record)}

/>

)

}

}

export default index