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、實現效果如下: