账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antd3.0 table新增的components属性如何使用
    38
    0

    antd3.0 table新增了components属性,用于覆盖默认table元素,官方更新日志上只提供了简答的配置,没有详细的元素使用方式,自己写了个如下,单没有起作用

    import React from 'react';
    import { Table } from 'antd';
    
    export class TestTable extends React.Component {
    
        constructor() {
            super();
    
            this.state = {
                components: {
                    table: MyTable,
                    header: {
                        wrapper: HeaderWrapper,
                        row: HeaderRow,
                        cell: HeaderCell,
                    },
                    body: {
                        wrapper: BodyWrapper,
                        row: BodyRow,
                        cell: BodyCell,
                    },
                },
                dataSource:[{
                    key: '1',
                    name: '胡彦斌',
                    age: 32,
                    address: '西湖区湖底公园1号'
                }, {
                    key: '2',
                    name: '胡彦祖',
                    age: 42,
                    address: '西湖区湖底公园1号'
                }],
                columns: [{
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '年龄',
                    dataIndex: 'age',
                    key: 'age',
                }, {
                    title: '住址',
                    dataIndex: 'address',
                    key: 'address',
                }]
            }
        }
    
        componentWillMount() {
    
        }
    
        componentWillUnmount() {
    
        }
    
        render() {
            const { components, columns, dataSource } = this.state;
            return (
                <Table components={components} columns={columns} dataSource={dataSource}/>
            );
        }
    }
    
    const MyTable = () => <div></div>;
    const HeaderWrapper = () => <div></div>;
    const HeaderRow = () => <div></div>;
    const HeaderCell = () => <div></div>;
    const BodyWrapper = () => <div></div>;
    const BodyRow = () => <div></div>;
    const BodyCell = () => <div></div>;
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 被順時間德忘記 普通会员 1楼

      在Ant Design 3.0中,表格组件的components属性主要用于定义表格的样式和样式规则。这些样式可以包括但不限于背景色、边框、边框样式、边框宽度、行高、列宽等。

      以下是一个简单的例子:

      ```jsx import React from 'react'; import { Table } from 'antd';

      function MyTable() { return (

      ); }

      export default MyTable; ```

      在这个例子中,我们创建了一个名为MyTable的组件,它包含了两个Table.Column组件。每个Table.Column组件都有一个标题属性,这个标题用于显示表格的列名。

      Table.Column组件中,我们可以使用各种组件属性来定义表格的样式。例如,我们可以在Table.Column组件的title属性中定义表格的标题,或者在Table.Column组件的Cell属性中定义单元格的内容。

      总的来说,components属性是Ant Design 3.0中非常强大的特性,它允许我们更加灵活地定义和使用表格组件的样式和样式规则。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部