A small requirement in the project recently, encountered some small problems when using the rowSelection attribute of Table, record it.
Requirements: form + rear radio
It stands to reason that it is a very simple requirement. After reading the document, it says that rowSelection can be configured.
<Table
columns={
columns}
dataSource={
varietyData}
rowSelection={
{
columnTitle: '操作', //标题
type: 'radio', //类型 单/多选
columnWidth: 150, //宽度
}}
bordered
rowKey="id"
/>
After configuration is like this
Obviously not appropriate, the operation should be on the right, and then look at the configuration of rowSelection, there is no property to set the selection to the right, only a fixed: boolean to configure whether to fix the selection box to the left.
After reading the article, I found that some bloggers said that there is actually a second type of fixed: string, which can be passed in 'left' or 'right' to specify whether it is fixed on the left or the right.
There are also prompts when configuring, and there is no code error after writing it.
<Table
columns={
columns}
dataSource={
varietyData}
rowSelection={
{
columnTitle: '操作', //标题
type: 'radio', //类型 单/多选
columnWidth: 150, //宽度
fixed: 'right', //对齐
}}
bordered
rowKey="id"
/>
The css style is also added when inspecting the element, but it does not take effect, it is still the same
It is preliminarily judged here that it is an ant version problem, and there is no way to solve it, and finally a wave of handwriting. . .
//设置状态
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
//columns内加上
{
title: '操作',
dataIndex: 'id',
align: 'center',
with: 150,
key: 'action',
render: (text: any) => (
<Radio
onClick={
() => setSelectedRowKeys([text])}
checked={
selectedRowKeys.includes(text)}
/>
),
},
//注意取消时处理一下状态
<Button
onClick={
() => {
setIsShowChooseVariety(false);//关弹窗
if (!choosedVariety) {
//判断是否有已选择的值
setSelectedRowKeys([]);
//没有已确定选择的时候，选了之后点取消，下次进入还是空状态。
} else {
setSelectedRowKeys([choosedVariety.id]);
//如果有已选择时候，无论怎么切换，点了取消之后还把选中项设置为选中项。
}
}}
>
取消
</Button>
Ok, logic implementation:
Although the requirements have been fulfilled, there are still some doubts. The fixed:'right' has not taken effect. If anyone knows the reason, please answer~