vue自定义穿梭框（内容体+多选框）

最近需要做一个资源分配的一个功能，然后用到了穿梭框，但是需要更多的功能控制。具体业务场景如下：需要同时可以分配查看和下载的权限。实现效果如下：

组件用的是： Ant Design Vue 的穿梭框

操作方式：在左侧列表展示未选择的数据，右侧展示已选的数据，同时可操作该条数据的查看和下载权限。只有当数据先选择到右侧时，才可以操作是否可以查看和下载的功能。

相关代码如下：

<a-transferv-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，碰到相关的操作时可以按照这个方法操作。