1频鉴、使用場景:
? ? 使用react+ant框架組合:table表格中某一列為單選框栓辜,進入頁面需要默認選中,并且可選:
? ? 效果圖:
代碼實現(xiàn)垛孔,采用的是函數(shù)式編寫:
1藕甩、定義選中變量:
??const?[RowKey,?setRowKey]?=?useState('')
2、在useEffect()中對RowKey進行初始化周荐,比如表格數(shù)據(jù)重新請求時狭莱,進行初始化。
3概作、表格:
<Table
??????????rowKey='hashCode'
??????????dataSource={dataSource}
??????????columns={columns}
??????????pagination={false}
??????????loading={loading}
??????????size="middle"
??????????style={{?minHeight:?400?}}
??????????rowSelection={rowSelection}
????????/>
注意:rowKey='hashCode' 腋妙,hashcode是數(shù)據(jù)中某一項,不編寫會報錯讯榕。rowSelection={rowSelection}?是主要配置骤素,下邊上rowSelection配置項
4、rowSelection配置項
??????const?rowSelection?=?{
????????????type:?'radio',//單選框類型
????????????columnTitle:?'默認意圖',//列名
????????????columnWidth:?150,//列寬
????????????selectedRowKeys:?RowKey,//默認選項
????????????onChange:?(selectedRowKeys,?selectedRows)?=>?onSelectChange(selectedRowKeys,?selectedRows),//用戶選擇時觸發(fā)回調(diào)
??????};
??????const?onSelectChange?=?(selectedRowKeys,?selectedRows)?=>?{
????????????setRowKey(selectedRowKeys[0])//將選擇項賦值
? ? ? }
在實現(xiàn)過程中愚屁,rowKey='hashCode'不設置的話谆甜,會報RowKey.indexof?not a function的錯誤;
也嘗試了
getCheckboxProps: record => ({
? ? ? checked: record.is_default ? true : false,
? ? }),
方式進行顯示集绰,但是控制臺會有報錯规辱,react也不推薦,所以最后采用上邊的方式栽燕。