如下所示：

前邊不顯示+，並且詳細資訊預設展開

在table中配置

 <Table
 expandedRowKeys={this.store.chargeTableData.map(item => item.key)} //展開的行
 expandIconAsCell={false}
 expandIconColumnIndex={-1}
 bordered     //展示邊框
 defaultExpandAllRows={true}  //初始時展開所有行
 pagination={{ pageSize: 5 }}  //分頁器
 expandedRowRender={this.expandedRowRender} //額外展開的行
 columns={columns}    //資料
 dataSource={this.store.chargeTableData} //資料陣列
 />

補充知識：antd Table 利用自己生成cell結合expandedRowKeys配置，實現任意cell控制展開列

因為專案需要，antd實現一個形如這樣的表格

但是奈何翻了好幾遍api文件並沒有發現這樣的東西，只好自己改造了，

首先table是這樣的

 <Table 
  columns={this.columns}
  dataSource={tableData} 
  bordered 
  pagination={false}
  size='small'
  expandIconAsCell={false} 
  expandIconColumnIndex={-1}
  expandedRowRender={record=>this.expandedRowTable(record)}
  expandedRowKeys={this.state.expandArray}
  />

實現了隱藏自帶按鈕、並確定了控制展開行的陣列，

接下來就是控制陣列了，

先繫結下方法

onClick={()=>this.expandTable(row)}

然後 是點選cell的方法

expandTable = row =>{
 const filtered = this.state.expandArray
 const text = this.state.expandBtnText 
 if(this.state.expandArray.includes(row.key)){
 filtered.splice(filtered.findIndex(element => element === row.key),1 );
 this.expandTdNum(parseInt(row.key,10),'reduce') 
 text[parseInt(row.key,10)-1] = '詳情'
 }else{
 filtered.push(row.key)
 this.expandTdNum(parseInt(row.key,'add') 
 text[parseInt(row.key,10)-1] = '關閉' 
 }
 this.setState({
 expandArray:filtered,})

最後控制陣列的方法

expandTdNum = (key,operation) =>{
 let temp = 0
 if(operation==='add'){
  temp++
 }else if(operation==='reduce'){
 temp--
 }else{
 return false
 }
 if(key>0 && key<7){
 this.setState({
  firstTdNum:this.state.firstTdNum + temp,})
 }else if(key>6 && key<10){
 this.setState({
  middleTdNum:this.state.middleTdNum + temp,})
 }else if(key>9 && key<13){
 this.setState({
  lastTdNum:this.state.lastTdNum + temp,})
 }
 }

以上這篇antd中table展開行預設展示,且不需要前邊的加號操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。