antd vue 穿梭框 高度随内容

可以通过设置穿梭框的样式来实现高度随内容自适应的效果。

首先，在样式中设置穿梭框的高度为 auto，这样就可以让高度随内容自适应：

.transfer {
  height: auto;
}

然后，在穿梭框中设置 list-style 的样式，使列表项不显示默认的圆点符号，这样就可以让列表项的高度与内容高度一致：

.transfer-list {
  list-style: none;
}

最后，在穿梭框的属性中设置 show-search 和 filter-option 的值为 true，这样可以启用搜索功能，并且搜索结果也能自适应高度：

<template>
  <a-transfer
    :dataSource="dataSource"
    :show-search="true"
    :filter-option="true"
    :render="render"
    :target-keys="targetKeys"
    @change="handleChange"
  >
  </a-transfer>
</template>

完整示例代码：

<template>
  <a-transfer
    :dataSource="dataSource"
    :show-search="true"
    :filter-option="true"
    :render="render"
    :target-keys="targetKeys"
    @change="handleChange"
  >
  </a-transfer>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        {
          key: '1',
          title: '选项1',
        },
        {
          key: '2',
          title: '选项2',
        },
        {
          key: '3',
          title: '选项3',
        },
        {
          key: '4',
          title: '选项4',
        },
      ],
      targetKeys: ['2', '3'],
    };
  },
  methods: {
    handleChange(targetKeys) {
      this.targetKeys = targetKeys;
    },
    render(item) {
      return item.title;
    },
  },
};
</script>

<style scoped>
.transfer {
  height: auto;
}
.transfer-list {
  list-style: none;
}
</style>