Ant-design-Table

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章