ant design vue1.7 table添加复选框

在 Ant Design Vue 1.7 中，可以通过 `a-table` 的 `columns` 属性中添加一个 `an-checkbox-column` 列来添加复选框。

以下是一个示例代码：

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" @row-click="onRowClick">
    <a-table-column title="#" dataIndex="id" />
    <a-table-column title="姓名" dataIndex="name" />
    <a-table-column title="年龄" dataIndex="age" />
    <a-table-column title="地址" dataIndex="address" />
    <a-table-column title="操作" :render="renderAction" />
    <a-table-column
      title="选择"
      :width="80"
      :custom-render="renderCheckbox"
      :fixed="true"
      align="center"
    />
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { id: 1, name: '张三', age: 18, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 20, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 22, address: '广州市天河区' }
      ]
    };
  },
  methods: {
    renderAction(h, { row }) {
      return h('a', '编辑');
    },
    renderCheckbox(h, { row }) {
      return h('a-checkbox', {
        props: {
          value: row.checked
        },
        on: {
          input: value => {
            row.checked = value;
          }
        }
      });
    },
    onRowClick(row) {
      row.checked = !row.checked;
    }
  },
  computed: {
    columns() {
      return [
        // 其他列定义
        {
          title: '选择',
          dataIndex: 'checked',
          width: 80,
          align: 'center',
          render: (text, record) => {
            return <a-checkbox v-model={record.checked} />;
          }
        }
      ];
    }
  }
};
</script>

在这个示例中，我们添加了一个 `an-checkbox-column` 列，并在 `renderCheckbox` 方法中渲染了复选框。同时，我们在 `columns` 属性中添加了一个 `checked` 列，并在 `render` 方法中渲染了复选框。我们还添加了一个 `onRowClick` 方法，用于在行点击时切换复选框的状态。

在实际使用中，您可以根据实际需求对复选框的样式和行为进行自定义。