ant design vue1.7 表格添加复选框 选中的数据追加到另一个表格中

Ant Design Vue 1.7 表格添加复选框后，可以通过以下步骤实现选中数据追加到另一个表格中：

1. 定义复选框列：在表格定义中添加一个 `an-checkbox-column` 列，用于显示复选框。

<a-table :columns="columns" :data-source="dataSource" row-key="id">
  <a-table-column
    title="复选框列"
    :width="80"
    :render="renderCheckbox"
  />
  <!-- 其他列定义 -->
</a-table>

2. 定义复选框渲染器：在表格定义中定义 `renderCheckbox` 方法，用于渲染复选框列。

methods: {
  renderCheckbox(h, { row }) {
    return h('a-checkbox', {
      props: {
        value: row.selected,
        checked: row.selected
      },
      on: {
        change: event => {
          row.selected = event.target.checked;
        }
      }
    });
  }
}

3. 监听复选框变化：在表格定义中定义 `watch` 方法，监听复选框的变化。

watch: {
  dataSource: {
    handler(data) {
      this.selectedRows = data.filter(row => row.selected);
    },
    deep: true
  }
},

4. 追加数据到另一个表格中：在 `selectedRows` 数组变化时，将其追加到另一个表格中。

watch: {
  selectedRows: {
    handler(rows) {
      const table = this.$refs.otherTable;
      table.data = rows.map(row => ({
        id: row.id,
        name: row.name,
        // 其他字段
      }));
    },
    deep: true
  }
}

完整的示例代码如下：

<a-table :columns="columns" :data-source="dataSource" row-key="id">
  <a-table-column
    title="复选框列"
    :width="80"
    :render="renderCheckbox"
  />
  <!-- 其他列定义 -->
</a-table>

<a-table ref="otherTable" :columns="otherColumns" :data-source="otherData" row-key="id">
  <!-- 其他列定义 -->
</a-table>

export default {
  data() {
    return {
      dataSource: [
        { id: 1, name: '张三', selected: false },
        { id: 2, name: '李四', selected: false },
        { id: 3, name: '王五', selected: false }
      ],
      selectedRows: [],
      otherData: [],
      columns: [
        // 其他列定义
      ],
      otherColumns: [
        { title: 'ID', dataIndex: 'id' },
        { title: '姓名', dataIndex: 'name' },
        // 其他列定义
      ]
    };
  },
  methods: {
    renderCheckbox(h, { row }) {
      return h('a-checkbox', {
        props: {
          value: row.selected,
          checked: row.selected
        },
        on: {
          change: event => {
            row.selected = event.target.checked;
          }
        }
      });
    }
  },
  watch: {
    dataSource: {
      handler(data) {
        this.selectedRows = data.filter(row => row.selected);
      },
      deep: true
    },
    selectedRows: {
      handler(rows) {
        const table = this.$refs.otherTable;
        table.data = rows.map(row => ({
          id: row.id,
          name: row.name,
          // 其他字段
        }));
      },
      deep: true
    }
  }
};

请注意，此示例代码仅供参考，具体实现方式可以根据您的实际需求进行调整。