Ant-design-Table

来源：互联网发布：网络监控工作的短板编辑：程序博客网时间：2024/05/22 10:27

1、将表格以组件形式加入到页面中：实现功能有分页显示和隐藏展开

2、代码思路如下：

<pre name="code" class="html">let Component_Table = React.createClass({render(){<span style="white-space:pre"></span>const columns = [{<span style="white-space:pre"></span>key:’’,<span style="white-space:pre"></span>name:’’,<span style="white-space:pre"></span>age:’’,<span style="white-space:pre"></span>address:’’,<span style="white-space:pre"></span>desc:’’,<span style="white-space:pre"></span>hide:’’<span style="white-space:pre"></span>}];//表格列const dataSource = [];//表格数据源for(let i=1; i<42; i++){  dataSource.push({  key:i,  name:'test '+i,  age:22,  address:'Earth , No '+i,  desc:'I\'m a good man No '+i,  hide:'hided text ^_^',  });  }const pagination ={//封装的分页total:dataSource.length,showSizeChanger:true,<span style="white-space:pre"></span>};return(<div><Table dataSource={dataSource} columns={columns} expandedRowRender={record=><p>{record.hidedTextName}</p>} pagination={pagination}  /></div>);}});

3、实现效果如下：

0 0