bee-table-tree

bee-table-tree

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>
        )
    }
}

API

bee-table-tree

参数	说明	类型	默认值
data	传入的表格数据	array	[]
columns	列的配置表，具体配置见下表	array	-

Column

参数	说明	类型	默认值
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