ant design vue2 表格穿梭框

Ant Design Vue 2 的表格穿梭框是一个非常方便实用的组件，它可以让用户方便地在两个列表中移动选项，用法如下：

<template>
  <a-transfer :data-source="dataSource" :target-keys="targetKeys"></a-transfer>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { key: '1', title: '选项一' },
        { key: '2', title: '选项二' },
        { key: '3', title: '选项三' },
      ],
      targetKeys: [],
    };
  },
};
</script>

在上述代码中，我们通过 `dataSource` 属性设置穿梭框中的选项，`targetKeys` 属性设置当前选中的选项。用户可以通过选中或取消选中某个选项，然后点击左右箭头来将选项移动到另一个列表中。

当用户移动选项时，`targetKeys` 属性会自动更新，您可以通过监听该属性的变化来进行一些后续处理，例如将选中的值发送到服务器端保存，或者更新本地的状态等等。

相关问题

ant design vue2 表格穿梭框选中复选框 拿到当前值

对于 Ant Design Vue 2 的表格穿梭框，可以通过 `@change` 事件来监听选项的变化，然后在回调函数中获取当前选中的值。具体实现代码如下：

<template>
  <a-transfer :data-source="dataSource" :target-keys="targetKeys" @change="handleChange"></a-transfer>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { key: '1', title: '选项一' },
        { key: '2', title: '选项二' },
        { key: '3', title: '选项三' },
      ],
      targetKeys: [],
    };
  },
  methods: {
    handleChange(targetKeys, direction, moveKeys) {
      console.log('选中的值：', targetKeys);
    },
  },
};
</script>

在 `handleChange` 方法中，第一个参数 `targetKeys` 就是当前选中的值。您可以根据业务需要进一步处理这些选中的值。

ant design vue2 表格穿梭框 选中复选框 拿到当前值

对于 Ant Design Vue 2 的表格穿梭框中选中复选框的问题，您可以通过自定义渲染函数来实现。具体步骤如下：

1. 在 `data` 中定义 `columns` 数组，用来存放表格的列信息，其中需要定义一个 `customRender` 函数来自定义渲染复选框：

<template>
  <a-transfer :data-source="dataSource" :target-keys="targetKeys">
    <template #render="item">{{ item.title }}</template>
    <template #renderList="item">
      <a-table
        :columns="columns"
        :row-selection="{selectedRowKeys: item.selectedKeys, onChange: item.onChange}"
        :dataSource="item.dataSource"
        :pagination="false"
        :row-key="record => record.key"
      />
    </template>
  </a-transfer>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { key: '1', title: '选项一', checked: false },
        { key: '2', title: '选项二', checked: true },
        { key: '3', title: '选项三', checked: false },
      ],
      targetKeys: [],
      columns: [
        { title: '选项', dataIndex: 'title' },
        {
          title: '选择',
          dataIndex: 'checked',
          customRender: (text, record, index) => {
            return (
              <a-checkbox
                checked={text}
                onChange={e => {
                  record.checked = e.target.checked;
                  this.handleChange();
                }}
              />
            );
          },
        },
      ],
    };
  },
  methods: {
    handleChange() {
      const selectedItems = this.dataSource.filter(item => item.checked);
      const selectedKeys = selectedItems.map(item => item.key);
      console.log('选中的值：', selectedKeys);
    },
  },
};
</script>

在上述代码中，我们自定义了一个 `columns` 数组，其中第二列使用了 `customRender` 函数来自定义渲染复选框。在渲染复选框时，我们监听了 `onChange` 事件，并在事件处理函数中通过修改 `record.checked` 的值来更新数据源。同时，我们在事件处理函数中调用了 `handleChange` 方法来处理选中的值。

2. 在表格穿梭框的 `renderList` 插槽中，使用 `a-table` 组件来渲染列表，并将选中的行传递给表格的 `selectedRowKeys` 属性，同时监听 `onChange` 事件来更新选中的行：

通过上述方法，我们可以自定义渲染复选框，并在选中复选框时获取当前选中的值。