最近需要做一个资源分配的一个功能，然后用到了穿梭框，但是需要更多的功能控制。具体业务场景如下：需要同时可以分配查看和下载的权限。实现效果如下：
组件用的是： Ant Design Vue 的穿梭框
操作方式：在左侧列表展示未选择的数据，右侧展示已选的数据，同时可操作该条数据的查看和下载权限。只有当数据先选择到右侧时，才可以操作是否可以查看和下载的功能。
相关代码如下：
<a-transfer
v-model:target-keys="targetKeys"
:row-key="(record) => record.id"
:data-source="currentData"
:one-way="true"
:titles="['未选', '已选']"
:show-search="true"
pagination
@change="handleChange"
class="transfer-box"
>
<template class="content" #render="item">
<div class="custom-item">{{ item.title }}</div>
<div class="opt-box" v-if="item.isOpt" @click.stop>
<a-checkbox
:checked="item.isView"
@change="handleCheckboxChange(item, 'isView')"
>查看</a-checkbox
>
<a-checkbox
:checked="item.isDown"
@change="handleCheckboxChange(item, 'isDown')"
>下载</a-checkbox
>
</div>
</template>
</a-transfer>但是主要记录的是另外一个问题，在当前内存插槽中添加多选框的时候，在你点击多选框的时候会联动到当前这条数据的选中状态，你选择的其实是多选框的状态，而不是这条数据的选择状态。最主要的操作就是在当前多选框外层的父盒子上添加 @click.stop 阻止冒泡。就可以防止上面那种情况发生。注：当stop事件添加到这两个多选框上时，也是会发生冒泡的情况，最好直接添加到父盒子上，这样就完美解决这个问题。
--------------------------------------------------------------------------
但是还想说另外一个点，这是发现Ant Design Vue的一个好用的点，:one-way="true"。给穿梭框添加这个属性就会更好操作，直接在右侧的框中点击一个删除按钮就可以，不需要再进行向左的操作。
这里记录一下穿梭框优化的一个点，因为按照逻辑，左侧数据在未选择的情况下，是不可以进行查看和下载的权限操作的，这就需要对数据进行一次处理，可以看到我加了一个条件判断。 v-if="item.isOpt"。 需要进行的是，只有右侧选中的数据才有相关的操作。
// 显示操作框
const handleOption = (checkArr, direction) => {
currentData.value.forEach((item) => {
if (checkArr.includes(item.id)) {
direction == 'left' ? (item.isOpt = false) : (item.isOpt = true);
}
});
};这个方法主要是实现：当向左移动时，直接将其可操作权限取消。当然向右选中数据同理，也同样需要给其添加可操作的权限。
我看了一下elementplus的穿梭框没有one-way 这个属性，但是操作应该是同样的，只需要在列表数据中筛选已选中的数据，进行下一步的操作。比如右侧已经选中并且添加了可查看和可下载的数据，在其向左侧移动时，在将这条数据取消可操作的同时，也可以将其的两个状态同时设为未选中。这个可以根据自己的业务需求进行具体操作。
这里记录的是一个操作demo，碰到相关的操作时可以按照这个方法操作。