antd穿梭框头部新增多选框的思路

最终效果如下 查看文档穿梭框 Transfer - Ant Design Vue (antdv.com)发现他只有两个部位支持插槽,其实还有children notFoundContent

因此这里暂时使用了footer部分的插槽来实现

<template #footer>
    此处放入多选框代码
</template>

同时使用css中的display布局Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

核心代码

.ant-transfer-list-headr{
    order: 1;
}
.ant-transfer-list-body{
    order: 3;
}
.ant-transfer-list-footer{
    order: 2;
}

但这样就不能在自定义底部了