ant design vue2 动态标签页 添加复选框表格

要在Ant Design Vue 2的动态标签页中添加复选框表格，你需要使用`<a-table>`组件和`<a-checkbox>`组件。

首先，你需要定义一个包含所有可选项的数据源，并在表格中显示它们。你可以使用`<a-table>`组件的`data`属性来绑定数据源，然后使用`<a-table-column>`组件的`dataIndex`属性来指定数据的字段名，以及`scopedSlots`属性来自定义渲染每个单元格的内容。

接下来，你需要在每一行中添加一个复选框。你可以使用`<a-checkbox>`组件，并在每个复选框中绑定一个选中状态的属性。你可以在表格中添加一个自定义列，使用`<template>`元素和`slot-scope`属性来渲染每个单元格的内容。在自定义列中，你可以使用`v-model`指令来双向绑定复选框的选中状态，在表格数据中保存选中的项。

下面是一个简单的示例代码，演示了如何在Ant Design Vue 2的动态标签页中添加复选框表格：

<template>
  <a-tabs v-model="activeTab">
    <a-tab-pane v-for="(tab, index) in tabs" :key="tab.key" :tab="tab.title">
      <a-table :data="tableData" row-key="id" :columns="columns">
        <template #checkbox="scope">
          <a-checkbox v-model="scope.row.checked" />
        </template>
      </a-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { ATabs, ATabPane, ATable, ATableColumn, ACheckbox } from 'ant-design-vue'

export default {
  components: { ATabs, ATabPane, ATable, ATableColumn, ACheckbox },
  data() {
    return {
      activeTab: '',
      tabs: [
        { key: '1', title: 'Tab 1' },
        { key: '2', title: 'Tab 2' },
        { key: '3', title: 'Tab 3' },
      ],
      tableData: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false },
      ],
      columns: [
        { title: 'ID', dataIndex: 'id' },
        { title: 'Name', dataIndex: 'name' },
        { title: 'Selected', dataIndex: 'checked', slots: { customRender: 'checkbox' } },
      ],
    }
  },
}
</script>