antd的Table組件怎樣勾選表格行

用官方提供的方法rowSelection代碼如下:

  const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      getCheckboxProps: record => ({
          disabled: record.name === 'Disabled User', // Column configuration not to be checked
          name: record.name,
      }),
  };

 <Table 
  columns={columns} 
  rowSelection={rowSelection}
  rowKey={record =>record.id} //這一個一定要選
  dataSource={this.state.tableData} 
  pagination={false}
  />

注意:上面這種方法是我從官網copy下來的但是會有一個潛在的bug,就是選中後再次進來頁面不能清除上一次選中的緩存,我的前兩篇文章會有介紹,下面具體又複製了另一種方法,代碼如下:

state={
selectedRowKeys:[ ],
}
const {selectedRowKeys } = this.state;
            const rowSelection = { 
                selectedRowKeys,
                onChange: (selectedRowKeys) => {
                    this.setState({
                        selectedRowIds : selectedRowKeys.map(Number),
                        selectedRowKeys 
                    })
                },
            };
//這種方法如果清楚緩存的時候只需要清楚掉selectedRowKeys爲空即可。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章