114 lines
3.3 KiB
JavaScript
114 lines
3.3 KiB
JavaScript
/**
|
||
*
|
||
* @title 嵌套子表格
|
||
* @parent 扩展行 Expanded Row
|
||
* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。
|
||
* demo1101
|
||
*/
|
||
|
||
import React, { Component } from "react";
|
||
import { Popconfirm,Icon,Checkbox } from 'tinper-bee';
|
||
import Table from "../../src";
|
||
import multiSelect from "../../src/lib/multiSelect";
|
||
|
||
const columns16 = [
|
||
{
|
||
title: "操作",
|
||
dataIndex: "d",
|
||
key: "d",
|
||
width:100,
|
||
render(text, record, index) {
|
||
return (
|
||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||
<a href="javascript:;" tooltip={text} >
|
||
一些操作
|
||
</a>
|
||
</Popconfirm>
|
||
);
|
||
}
|
||
},
|
||
{ title: "订单编号", dataIndex: "a", key: "a", width: 250 },
|
||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||
{ title: "供应商", dataIndex: "c", key: "c", width: 200, fixed:'right' },
|
||
|
||
];
|
||
const columns17 = [
|
||
{ title: "订单编号", dataIndex: "a", key: "a", width: 100 },
|
||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 }
|
||
];
|
||
|
||
const data16 = [
|
||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商", d: "操作", key: "1" },
|
||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
|
||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
|
||
];
|
||
const MultiSelectTable = multiSelect(Table,Checkbox);
|
||
class Demo16 extends Component {
|
||
constructor(props){
|
||
super(props);
|
||
this.state={
|
||
data_obj:{}
|
||
}
|
||
}
|
||
expandedRowRender = (record, index, indent) => {
|
||
let height = 42 * (this.state.data_obj[record.key].length+ 2);
|
||
|
||
return (
|
||
<Table
|
||
columns={columns17}
|
||
style={{height:height}}
|
||
data={this.state.data_obj[record.key]}
|
||
|
||
/>
|
||
);
|
||
};
|
||
getData=(expanded, record)=>{
|
||
//当点击展开的时候才去请求数据
|
||
let new_obj = Object.assign({},this.state.data_obj);
|
||
if(expanded){
|
||
if(record.key==='1'){
|
||
new_obj[record.key] = [
|
||
{ a: "NU0391056", b: "2019-03-01", c: "gys1", d: "操作", key: "1" },
|
||
{ a: "NU0391057", b: "2018-11-02", c: "gys2", d: "操作", key: "2" },
|
||
]
|
||
this.setState({
|
||
data_obj:new_obj
|
||
})
|
||
}else{
|
||
new_obj[record.key] = [
|
||
{ a: "NU0391079", b: "2019-04-17", c: "gys5", d: "操作", key: "3" },
|
||
]
|
||
this.setState({
|
||
data_obj:new_obj
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
haveExpandIcon=(record, index)=>{
|
||
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
|
||
if(index == 0){
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<MultiSelectTable
|
||
className="expanded-table"
|
||
columns={columns16}
|
||
data={data16}
|
||
onExpand={this.getData}
|
||
expandedRowRender={this.expandedRowRender}
|
||
expandIconAsCell={true}
|
||
collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}
|
||
expandedIcon={<Icon type='uf-treearrow-down'/>}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default Demo16;
|