因为element组件库中Tree 树形控件自带穿梭框无法满足业务需求,所以利用el-tree和el-table结合的方式自定义穿梭框。
效果图
该功能满足左侧树形控件的整体选中和子集单独选中和取消效果,对应右侧列表的展示和隐藏以及自定义的删除列表项关联左侧树形控件自动取消功能。
代码如下
<template>
<!-- 自定义树形穿梭框组件、理论上左右均可选择是否为树形结构,目前固定为左侧树形、右侧无层级结构 -->
<div class="tree-transfer">
<!-- 穿梭框左侧 -->
<div class="tree-transfer-left">
<el-tree
ref="treeLeft"
class="treeitems"
:data="Left"
show-checkbox
node-key="Id"
:props="defaultProps"
default-expand-all
@check-change="handleCheck"
/>
</div>
<!-- 穿梭框右侧 -->
<div class="tree-transfer-right">
<el-table
:data="tableData"
style="width: 100%"
:header-cell-style="{
background: '#E5ECF0',
}"
>