react bee-table-tree component for tinper-bee
some description...
class Demo extends Component {
constructor(props) {
super(props);
this.columns = [{
title: "Name",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}];
this.data = [{
key: 1,
name: "root",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "firstChildNode",
age: 42,
address: "New York No. 2 Lake Park",
children: [
{
key: 111,
name: "sencondChildNode",
age: 16,
address: "New York No. 3 Lake Park"
}
]
},
{
key: 12,
name: "firstChildNode",
age: 30,
address: "New York No. 3 Lake Park",
children: [
{
key: 121,
name: "sencondChildNode",
age: 16,
address: "New York No. 3 Lake Park"
}
]
},
]
}];
}
render() {
return (
<div className="demo1">
<TableTree columns={this.columns} data={this.data} />
</div>
)
}
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 传入的表格数据 | array | [] |
columns | 列的配置表,具体配置见下表 | array | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 列的键 | string | - |
className | 传入列的classname | String | - |
colSpan | 该列的colSpan | Number | - |
title | 列的标题 | node | - |
dataIndex | 显示数据记录的字段 | String | - |
width | 宽度的特定比例根据列的宽度计算 | String/Number | - |
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-table-tree
$ cd bee-table-tree
$ npm install
$ npm run dev