树型穿梭框

<template>
	<!-- 自定义树形穿梭框组件,固定为左侧树形、右侧无层级结构 -->
	<div class="tree-transfer">
		<!-- 穿梭框左侧 -->
		<div class="tree-transfer-left">
			<el-tree ref="treeLeft" :data="dataLeft" check-strictly show-checkbox node-key="id" :props="defaultProps"
				@check-change="handleCheckChange" default-expand-all>
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>{{ node.label }}</span>
				</span>
			</el-tree>
		</div>
		<!-- 穿梭框右侧 -->
		<div class="tree-transfer-right">
			<!-- 右侧直接放置结果 -->
			<div v-for="(item,index) in dataRight" :key="index">
				<span>{{item.groupName}}</span>
				<i class="el-icon-close" @click="deleteGroup(item.id)"></i>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['datas', 'defaultProps','id'],
		data() {
			return {
				dataLeft: [],
				dataRight: [],
				checked: false,
				gkfwidItem: '',
				gkfwnameItem: '',
				newId:[]
			}
		},
		watch: {
			datas(val) {
				if (val) {
					this.dataLeft = this.datas;
				}
			},
			id(val){
				if(val.indexOf(',')>0){
					this.newId = val.split(',');
					this.newId.forEach(item=>{
						this.$refs.treeLeft.setChecked(item, true);
					})
				}else{
					this.id = val;
					this.$refs.treeLeft.setChecked(this.id, true);
				}
			}
		},
		methods: {
			//右侧点X删除
			deleteGroup(id) {
				this.dataRight.forEach((item, index) => {
					if (item.id == id) {
						this.dataRight.splice(index, 1);
						this.$refs.treeLeft.setChecked(id, false);
					}
				})
				this.getdataRightData();
				this.$nextTick(() => {
					this.$bus.$emit('getRightDataId', this.gkfwidItem, this.gkfwnameItem);

				});
			},
			// 左侧复选框触发的方法
			handleCheckChange(data, checked) {
				this.$refs.treeLeft.setChecked(data.id, checked);
				if (data.children && data.children.length) {
					data.children.forEach(item => {
						this.handleCheckChange(item, checked)
					})
				}
				if (checked) {
					this.dataRight.push(data)
					let arr = this.dataRight;
					const res = new Map();
					this.dataRight = arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
					this.getdataRightData();
					this.$nextTick(() => {
						this.$bus.$emit('getRightDataId', this.gkfwidItem, this.gkfwnameItem);
					});
				} else {
					this.dataRight.forEach((item, index) => {
						if (item.id == data.id) {
							this.dataRight.splice(index, 1)
						}
					})
					this.getdataRightData();
					this.$nextTick(() => {
						this.$bus.$emit('getRightDataId', this.gkfwidItem, this.gkfwnameItem);
					});
				}
			},
			getdataRightData() {
				let gkfwids = this.dataRight.map(item => {
					return item.groupId;
				})
				let gkfwnames = this.dataRight.map(item => {
					return item.groupName;
				})
				this.gkfwidItem = gkfwids.join(',');
				this.gkfwnameItem = gkfwnames.join(',');
				// console.log(this.gkfwidItem, this.gkfwnameItem)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tree-transfer {
		display: flex;
		height: 350px;
		overflow: hidden;
		overflow-y: auto;

		.tree-transfer-left {
			min-width: 300px;
			border: 1px #E5E5E5 solid;
			border-radius: 10px;
			padding: 10px;
			overflow-x: hidden;
		}

		.tree-transfer-middle {
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 120px;
		}

		.tree-transfer-right {
			height: 350px;
			overflow-y: auto;
			min-width: 300px;
			border: 1px #E5E5E5 solid;
			border-radius: 10px;
			padding: 10px;
		}
	}

	.tree-transfer-right i {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-left: 10px;
		background-color: #dfdfdf;
		line-height: 14px;
	}

	/deep/ .tree-transfer-right[data-v-71f71cdc] {
		height: 328px !important;
	}
</style>