1.antd官網表格元件：

2.引用antd的表格元件，即：

import {Table} from ‘antd’；

渲染表格元件：

說明：

（1）rowClassName屬性是新增表格行樣式屬性，此時的this.setClassName方法為點選行之後為其新增行高亮樣式。

（2）onRow是給表格行新增點選onClick事件，也可在其內部新增其他事件，如滑鼠移入、移出等。

（3）下面為實現程式碼：（本人對程式碼均做了註釋說明，大家可參考）

            //antd表格元件
            <Table
                  pagination={{  // 分頁
                  current: this.state.Current,
                  total: this.state.total,
                  pageSize:this.props.pageSize,
                  onChange: this.antdPage,
                }}  
                dataSource={this.state.dataSource}   //表格資料渲染
                scroll={{ x: this.props.scrollX }}   //表格內弄的橫向滾動
                className={`${style['l-table-td']}`} //給表格列新增不換行樣式
                rowClassName={this.setClassName} //表格行點選高亮
                onRow={(record) => {//表格行點選事件
                  return {
                    onClick: this.clickRow.bind(this,record.no)
                  };
                }}
                />
             clickRow(num){
                 this.setState({
                  activeIndex:(num-1)//獲取點選行的索引
                 })
      
            }
            setClassName=(record,index)=>{//record代表表格行的內容，index代表行索引
              //判斷索引相等時新增行的高亮樣式
              return index === this.state.activeIndex ? `${style['l-table-row-active']}` : "";
            }
 

參考：