你可以在 `columns` 中设置 `defaultChecked` 属性来设置
默认选中的状态，例如：
```vue
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{
key: 1,
name: 'John',
age: 32,
},
{
key: 2,
name: 'Mike',
age: 25,
},
{
key: 3,
name: 'Lucy',
age: 28,
},
],
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Selected',
dataIndex: 'selected',
defaultChecked: true, //
默认选中
scopedSlots: { customRender: 'selected' },
},
],
};
},
};
</script>
```
在上面的示例中，我们将 `Selected` 列的 `defaultChecked` 属性设置为 `true`，因此
默认情况下所有复选框都会被
选中。如果你需要根据数据动态设置复选框的
选中状态，可以在数据源中为每一行数据添加一个 `selected` 属性，并将其设置为 `true` 或 `false`。然后，在 `Selected` 列的 `scopedSlots` 中使用 `selected` 插槽来渲染复选框，并将 `checked` 属性设置为 `selected` 的值，例如：
```vue
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{
key: 1,
name: 'John',
age: 32,
selected: true,
},
{
key: 2,
name: 'Mike',
age: 25,
selected: false,
},
{
key: 3,
name: 'Lucy',
age: 28,
selected: true,
},
],
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Selected',
dataIndex: 'selected',
scopedSlots: {
customRender: 'selected',
},
},
],
};
},
};
</script>
<template #selected="{ text, record }">
<a-
checkbox :checked="record.selected"></a-
checkbox>
</template>
```
在上面的示例中，我们在数据源中为每一行数据添加了一个 `selected` 属性，并将其设置为 `true` 或 `false`。然后，在 `Selected` 列的 `scopedSlots` 中使用 `selected` 插槽来渲染复选框，并将 `checked` 属性设置为 `selected` 的值，这样就可以根据数据动态设置复选框的
选中状态了。
本文探讨Ant Design中的多选框组件，详细解析如何设置默认为未选中状态，涵盖部分选中、全部选中及未选中三种全选状态的实现方法。
最低0.47元/天 解锁文章
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
