a-transfer 设置目标区域样式

要使用a-transfer设置目标区域的样式，可以在transfer组件中使用targetKeys属性和render属性。

1. targetKeys属性

targetKeys属性用于设置目标区域的选项列表。可以通过设置该属性来控制目标区域的显示和隐藏。

例如：

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

<script>
export default {
  data() {
    return {
      mockData: [
        { key: '1', title: '选项一' },
        { key: '2', title: '选项二' },
        { key: '3', title: '选项三' },
        { key: '4', title: '选项四' },
        { key: '5', title: '选项五' },
        { key: '6', title: '选项六' },
      ],
      targetKeys: [],
    };
  },
};
</script>

在上面的代码中，targetKeys属性被设置为空数组，因此目标区域不会显示任何选项。

2. render属性

render属性用于自定义目标区域的样式和内容。可以通过设置该属性来控制目标区域的外观和功能。

例如：

<template>
  <a-transfer :data-source="mockData" :target-keys="targetKeys" :render="renderFunc"></a-transfer>
</template>

<script>
export default {
  data() {
    return {
      mockData: [
        { key: '1', title: '选项一' },
        { key: '2', title: '选项二' },
        { key: '3', title: '选项三' },
        { key: '4', title: '选项四' },
        { key: '5', title: '选项五' },
        { key: '6', title: '选项六' },
      ],
      targetKeys: [],
    };
  },
  methods: {
    renderFunc(h, option) {
      return h('div', [
        h('span', option.title),
        h('button', { on: { click: () => this.handleDelete(option.key) } }, '删除'),
      ]);
    },
    handleDelete(key) {
      const index = this.targetKeys.indexOf(key);
      if (index > -1) {
        this.targetKeys.splice(index, 1);
      }
    },
  },
};
</script>

在上面的代码中，render属性被设置为一个函数，用来渲染每一个目标区域的选项。该函数接收两个参数：h和option。h是Vue的createElement函数，用于创建虚拟DOM节点；option是每个选项的数据对象。

在render函数中，我们创建了一个div节点，包含了选项的标题和一个删除按钮。点击删除按钮会调用handleDelete方法，从目标区域中删除对应的选项。