好的，您的问题是如何在
ant design vue2
中的
两个表格
中，其
中一个添加复
选框。
您可以使用
ant design vue2
中的 `<a-checkbox>` 组件来实现复
选框的功能。您可以在
一个表格
中添加这个组件，然后在表格的每一行
中使用它来实现复
选框的效果。
以下是
一个示例代码，其
中第
一个表格没有复
选框，第二个表格添加了复
选框：
```html
<template>
<div>
<a-table :columns="columns1" :data-source="data1" />
<a-table :columns="columns2" :data-source="data2">
<template slot="selection" slot-scope="{ selectedRowKeys, onChange }">
<a-checkbox-group :value="selectedRowKeys" @change="onChange">
<a-checkbox :value="row.id" v-for="row in data2" :key="row.id">{{ row.name }}</a-checkbox>
</a-checkbox-group>
</template>
</a-table>
</div>
</template>
<script>
export default {
data() {
return {
columns1: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
],
data1: [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
],
columns2: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
],
data2: [
{
id: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
id: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
id: 3,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
],
};
},
};
</script>
```
在上面的代码
中，第
一个表格没有添加复
选框。而在第二个表格
中，我们添加了
一个名为 `selection` 的插槽，用于展示复
选框。然后在插槽
中，我们使用 `<a-checkbox-group>` 组件来包含所有的复
选框，使用 `<a-checkbox>` 组件来渲染每一行的复
选框。我们还需要使用 `slot-scope` 属性来获取已
选中的行和更改已
选中行的事件。
扫一扫
2177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
