Antd table select 不工作，总是 selecting 所有行
Antd table select not working, always selecting all the rows
我正在尝试在我的 antd 中实现行选择 table 但是当我选择任何行时，所有行都会被选中
<PhcTable
pagination={false}
dataSource={configurationOptions?.ConfigDeposits[index].creditTiers}
columns={columnsPaymentPlans}
rowSelection={{onselect:(record)=>{console.log(record)}}}
scroll={{ x: 500 }}
/>
const columnsPaymentPlans = [
{
title: "Credit Tiers",
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: "Credit Risk",
dataIndex: "CreditRisk",
key: "CreditRisk",
width: 60,
},
{
title: "Notes",
dataIndex: "notes",
key: "notes",
width: 100,
},
{
title: "Deposit",
dataIndex: "deposit",
key: "deposit",
width: 60,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`deposit${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record,"%"),
},
]}
>
<PhcInputNumber
maxLength={4}
style={{
height: "40px",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
}}
value={text}
//onChange={onInputChange("minDepositType", index)}
/>
</PhcForm.Item>
),
},
{
title: "Max Loan Amount",
dataIndex: "maxLoanAmount",
key: "maxLoanAmount",
width: 70,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`maxLoanAmount${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateMaxLoanAmount(rule, value, callback, record),
},
]}
>
<PhcInputDecimal
keyboard={true}
controls={true}
onKeyPress={onNumberPress}
formatter={(value) =>
`${value}`.replace(/(\..*)\./g, '$()')
}
maxLength={5}
style={{
height: "40px",
//width: isBrowser && "75%",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
//minWidth: "218px",
}}
value={text}
//onChange={onInputChange("maxLoanAmount", index)}
/>
</PhcForm.Item>
),
},
{
title: "Terms",
dataIndex: "Terms",
key: "configDepositsTermsIds",
width: 150,
render: (text, record, index) => (
<PhcForm.Item
initialValue={record.Terms.filter(x=>x.selected == true).map(x=>x.id)}
name={`ConfigDepositsTermsIds${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record),
},
]}
>
<PhcSelect
mode="multiple"
optionFilterProp="label"
allowClear
showSearch
showArrow
style={{ width: isBrowser && "75%" }}
>
{record.Terms &&
record.Terms.map((item) => (
<PhcSelect.Option value={item.id} label={item.term}>
{item.term}
</PhcSelect.Option>
))}
</PhcSelect>
</PhcForm.Item>
),
}
];
“creditTiers”：[
{
“providerSpecialtyId”：1735，
“creditTierId”：1，
"creditTier": "Tier 1 Credit - Prime",
“信用风险”：“低”，
"notes": "此信用等级服务于近优质、优质和超级优质。",
“存款”：0，
“最大贷款金额”：20000，
“选择”：假的，
“条款”：[
{
“编号”：1，
“任期”：“6”，
“选择”：假
},
{
“编号”：2，
“任期”：“12”，
“选择”：假
},
{
“编号”：3，
“术语”：“18”，
“选择”：假
},
{
“编号”：4，
“任期”：“24”，
“选择”：假
},
{
“编号”：5，
“术语”：“36”，
“选择”：假
},
{
“编号”：6，
“任期”：“48”，
“选择”：假
},
{
“编号”：7，
“任期”：“60”，
“选择”：假
}
]
},
{
“providerSpecialtyId”：1735，
“creditTierId”：2，
"creditTier": "二级信用 - 次贷",
"信用风险": "Low/Moderate",
"notes": "此信用等级也适用于低收入申请人。",
“存款”：10，
“最大贷款金额”：20000，
“选择”：假的，
“条款”：[
{
“编号”：1，
“任期”：“6”，
“选择”：假
},
{
“编号”：2，
“任期”：“12”，
“选择”：假
},
{
“编号”：3，
“术语”：“18”，
“选择”：假
},
{
“编号”：4，
“任期”：“24”，
“选择”：假
},
{
“编号”：5，
“术语”：“36”，
“选择”：假
},
{
“编号”：6，
“任期”：“48”，
“选择”：假
},
{
“编号”：7，
“任期”：“60”，
“选择”：假
}
]
},
{
“providerSpecialtyId”：1735，
“creditTierId”：3，
"creditTier": "Tier 3 Credit - Deep Sub-Prime",
"信用风险": "Moderate/High",
"notes": "此积分等级最适合用于牙齿矫正。",
“存款”：15，
“最大贷款金额”：15000，
“选择”：假的，
“条款”：[
{
“编号”：1，
“任期”：“6”，
“选择”：假
},
{
“编号”：2，
“任期”：“12”，
“选择”：假
},
{
“编号”：3，
“术语”：“18”，
“选择”：假
},
{
“编号”：4，
“任期”：“24”，
“选择”：假
},
{
“编号”：5，
“术语”：“36”，
“选择”：假
},
{
“编号”：6，
“任期”：“48”，
“选择”：假
},
{
“编号”：7，
“任期”：“60”，
“选择”：假
}
]
},
{
“providerSpecialtyId”：1735，
“creditTierId”：4，
"creditTier": "Tier 4 信用 - 资金不足",
"信用风险": "Moderate/High",
"notes": "申请人可以使用 SS# 或 ITIN# 申请。",
“存款”：15，
“最大贷款金额”：7500，
“选择”：假的，
“条款”：[
{
“编号”：1，
“任期”：“6”，
“选择”：假
},
{
“编号”：2，
“任期”：“12”，
“选择”：假
},
{
“编号”：3，
“术语”：“18”，
“选择”：假
},
{
“编号”：4，
“任期”：“24”，
“选择”：假
},
{
“编号”：5，
“术语”：“36”，
“选择”：假
},
{
“编号”：6，
“任期”：“48”，
“选择”：假
},
{
“编号”：7，
“任期”：“60”，
“选择”：假
}
]
},
{
“providerSpecialtyId”：1735，
“creditTierId”：5，
"creditTier": "Tier 5 信用 - 万不得已",
“信用风险”：“高”，
"notes": "将牙科还款选项限制为 2、3 和 4 个月。",
“存款”：20，
“最大贷款金额”：7500，
“选择”：假的，
“条款”：[
{
“编号”：1，
“任期”：“6”，
“选择”：假
},
{
“编号”：2，
“任期”：“12”，
“选择”：假
},
{
“编号”：3，
“术语”：“18”，
“选择”：假
},
{
“编号”：4，
“任期”：“24”，
“选择”：假
},
{
“编号”：5，
“术语”：“36”，
“选择”：假
},
{
“编号”：6，
“任期”：“48”，
“选择”：假
},
{
“编号”：7，
“任期”：“60”，
“选择”：假
}
]
}
]
问题是您没有为每一行指定键。默认情况下，antd 在每一行中查找 key。由于您没有，根据您在上面添加的数据，密钥是 creditTierId。因此，您可以通过以下方式在 table 中指定行键：
rowKey={(record) => record.creditTierId}
如果只启用 rowSelection，则可以 select 任何行。但是为了知道您 selected 的行，您可以创建一个状态并控制 rowSelection。请检查代码。我在 rowSelection 中使用 onChange 函数，它提供了两个参数。第一个 selected 行键数组和第二个 selected 行。
function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const columnsPaymentPlans = [
{
title: 'Credit Tiers',
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: 'Credit Risk',
dataIndex: 'CreditRisk',
key: 'CreditRisk',
width: 60
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',
width: 100
},
// ...Other Columns
];
return (
<Table
pagination={false}
dataSource={configurationOptions?.creditTiers}
columns={columnsPaymentPlans}
rowKey={(record) => record.creditTierId}
rowSelection={{
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
}
}}
scroll={{ x: 500 }}
/>
);
}
export default App;
我正在尝试在我的 antd 中实现行选择 table 但是当我选择任何行时，所有行都会被选中
<PhcTable
pagination={false}
dataSource={configurationOptions?.ConfigDeposits[index].creditTiers}
columns={columnsPaymentPlans}
rowSelection={{onselect:(record)=>{console.log(record)}}}
scroll={{ x: 500 }}
/>
const columnsPaymentPlans = [
{
title: "Credit Tiers",
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: "Credit Risk",
dataIndex: "CreditRisk",
key: "CreditRisk",
width: 60,
},
{
title: "Notes",
dataIndex: "notes",
key: "notes",
width: 100,
},
{
title: "Deposit",
dataIndex: "deposit",
key: "deposit",
width: 60,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`deposit${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record,"%"),
},
]}
>
<PhcInputNumber
maxLength={4}
style={{
height: "40px",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
}}
value={text}
//onChange={onInputChange("minDepositType", index)}
/>
</PhcForm.Item>
),
},
{
title: "Max Loan Amount",
dataIndex: "maxLoanAmount",
key: "maxLoanAmount",
width: 70,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`maxLoanAmount${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateMaxLoanAmount(rule, value, callback, record),
},
]}
>
<PhcInputDecimal
keyboard={true}
controls={true}
onKeyPress={onNumberPress}
formatter={(value) =>
`${value}`.replace(/(\..*)\./g, '$()')
}
maxLength={5}
style={{
height: "40px",
//width: isBrowser && "75%",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
//minWidth: "218px",
}}
value={text}
//onChange={onInputChange("maxLoanAmount", index)}
/>
</PhcForm.Item>
),
},
{
title: "Terms",
dataIndex: "Terms",
key: "configDepositsTermsIds",
width: 150,
render: (text, record, index) => (
<PhcForm.Item
initialValue={record.Terms.filter(x=>x.selected == true).map(x=>x.id)}
name={`ConfigDepositsTermsIds${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record),
},
]}
>
<PhcSelect
mode="multiple"
optionFilterProp="label"
allowClear
showSearch
showArrow
style={{ width: isBrowser && "75%" }}
>
{record.Terms &&
record.Terms.map((item) => (
<PhcSelect.Option value={item.id} label={item.term}>
{item.term}
</PhcSelect.Option>
))}
</PhcSelect>
</PhcForm.Item>
),
}
];
“creditTiers”：[ { “providerSpecialtyId”：1735， “creditTierId”：1， "creditTier": "Tier 1 Credit - Prime", “信用风险”：“低”， "notes": "此信用等级服务于近优质、优质和超级优质。", “存款”：0， “最大贷款金额”：20000， “选择”：假的， “条款”：[ { “编号”：1， “任期”：“6”， “选择”：假 }, { “编号”：2， “任期”：“12”， “选择”：假 }, { “编号”：3， “术语”：“18”， “选择”：假 }, { “编号”：4， “任期”：“24”， “选择”：假 }, { “编号”：5， “术语”：“36”， “选择”：假 }, { “编号”：6， “任期”：“48”， “选择”：假 }, { “编号”：7， “任期”：“60”， “选择”：假 } ] }, { “providerSpecialtyId”：1735， “creditTierId”：2， "creditTier": "二级信用 - 次贷", "信用风险": "Low/Moderate", "notes": "此信用等级也适用于低收入申请人。", “存款”：10， “最大贷款金额”：20000， “选择”：假的， “条款”：[ { “编号”：1， “任期”：“6”， “选择”：假 }, { “编号”：2， “任期”：“12”， “选择”：假 }, { “编号”：3， “术语”：“18”， “选择”：假 }, { “编号”：4， “任期”：“24”， “选择”：假 }, { “编号”：5， “术语”：“36”， “选择”：假 }, { “编号”：6， “任期”：“48”， “选择”：假 }, { “编号”：7， “任期”：“60”， “选择”：假 } ] }, { “providerSpecialtyId”：1735， “creditTierId”：3， "creditTier": "Tier 3 Credit - Deep Sub-Prime", "信用风险": "Moderate/High", "notes": "此积分等级最适合用于牙齿矫正。", “存款”：15， “最大贷款金额”：15000， “选择”：假的， “条款”：[ { “编号”：1， “任期”：“6”， “选择”：假 }, { “编号”：2， “任期”：“12”， “选择”：假 }, { “编号”：3， “术语”：“18”， “选择”：假 }, { “编号”：4， “任期”：“24”， “选择”：假 }, { “编号”：5， “术语”：“36”， “选择”：假 }, { “编号”：6， “任期”：“48”， “选择”：假 }, { “编号”：7， “任期”：“60”， “选择”：假 } ] }, { “providerSpecialtyId”：1735， “creditTierId”：4， "creditTier": "Tier 4 信用 - 资金不足", "信用风险": "Moderate/High", "notes": "申请人可以使用 SS# 或 ITIN# 申请。", “存款”：15， “最大贷款金额”：7500， “选择”：假的， “条款”：[ { “编号”：1， “任期”：“6”， “选择”：假 }, { “编号”：2， “任期”：“12”， “选择”：假 }, { “编号”：3， “术语”：“18”， “选择”：假 }, { “编号”：4， “任期”：“24”， “选择”：假 }, { “编号”：5， “术语”：“36”， “选择”：假 }, { “编号”：6， “任期”：“48”， “选择”：假 }, { “编号”：7， “任期”：“60”， “选择”：假 } ] }, { “providerSpecialtyId”：1735， “creditTierId”：5， "creditTier": "Tier 5 信用 - 万不得已", “信用风险”：“高”， "notes": "将牙科还款选项限制为 2、3 和 4 个月。", “存款”：20， “最大贷款金额”：7500， “选择”：假的， “条款”：[ { “编号”：1， “任期”：“6”， “选择”：假 }, { “编号”：2， “任期”：“12”， “选择”：假 }, { “编号”：3， “术语”：“18”， “选择”：假 }, { “编号”：4， “任期”：“24”， “选择”：假 }, { “编号”：5， “术语”：“36”， “选择”：假 }, { “编号”：6， “任期”：“48”， “选择”：假 }, { “编号”：7， “任期”：“60”， “选择”：假 } ] } ]
问题是您没有为每一行指定键。默认情况下，antd 在每一行中查找 key。由于您没有，根据您在上面添加的数据，密钥是 creditTierId。因此，您可以通过以下方式在 table 中指定行键：
rowKey={(record) => record.creditTierId}
如果只启用 rowSelection，则可以 select 任何行。但是为了知道您 selected 的行，您可以创建一个状态并控制 rowSelection。请检查代码。我在 rowSelection 中使用 onChange 函数，它提供了两个参数。第一个 selected 行键数组和第二个 selected 行。
function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const columnsPaymentPlans = [
{
title: 'Credit Tiers',
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: 'Credit Risk',
dataIndex: 'CreditRisk',
key: 'CreditRisk',
width: 60
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',
width: 100
},
// ...Other Columns
];
return (
<Table
pagination={false}
dataSource={configurationOptions?.creditTiers}
columns={columnsPaymentPlans}
rowKey={(record) => record.creditTierId}
rowSelection={{
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
}
}}
scroll={{ x: 500 }}
/>
);
}
export default App;