5.3-iuap应用平台前端培训_案例开发（完成表格功能）.md

完成表格功能

1. 引入 table 组件

important {Table} from 'tinper-bee';

2. 根据tinper官网api设置clumn。 例如：角色管理节点为例

const column = [
            {
                title: "角色组管理",
                dataIndex: "groupM",
                key: "groupM",
                render(text,record,index){
                    return (
                        <a onClick={()=>{self.toGroupM(record)}}>角色组管理</a>
                    )
                }
            },
            {
                title: "角色权限管理",
                dataIndex: "groupP",
                key: "groupP",
                render(text,record,index){
                    return (
                        <a onClick={()=>{self.toGroupP(record)}}>角色权限管理</a>
                    )
                }
            },
            {
                title: "角色编码",
                dataIndex: "roleCode",
                key: "roleCode",
            },
            {
                title: "角色名称",
                dataIndex: "roleName",
                key: "roleName",
            },
            {
                title: "角色描述",
                dataIndex: "roleDescribe",
                key: "roleDescribe",
            },
            {
                title: "操作",
                dataIndex: "e",
                key: "e",
                render(text,record,index){
                    return (
                        <div className='operation-btn'>
                            <Button size='sm' className='edit-btn' onClick={()=>{self.edit(true,record)}}>编辑</Button>
                            <Button size='sm' className='del-btn' onClick={()=>{self.delItem(record,index)}}>删除</Button>
                            <Button size='sm' className='detail-btn' onClick={()=>{self.edit(false,record)}}>查看</Button>
                        </div>
                    )
                }
            },

        ];

3. 在页面中使用 table ，并传入数据

const { list }= this.props;// table数据
<Table
    rowKey={(r,i)=>i}
    columns={column}
    data={list}

更多复杂table功能详见 tinper官网