vue实现自定义树形穿梭框功能

需求：

我们在开发过程中，会遇到需要将一个数据选择做成穿梭框，但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示，ElementUI自身无法在穿梭框中添加树形结构，网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足。以下是我们简单的封装写的组件可以实现此功能

在这里插入图片描述

1，封装的treeTransfetr组件如下：
​<template><div class="treeTransfer"><!-- 左边 --><div class="leftTree"><div class="list"><div class="left_lowline"><div class="leftcheck_con"><el-checkbox v-model="checkedLeft" :disabled="leftTreeData.length < 1" label="" size="large"style="margin-right: 12px" @change="leftAllCheck" /><p class="left_title">{{ props.title[0] }}</p></div><div>{{ leftOperation.length }}/{{ leftAllselectIdarry.length }}</div></div><el-tree ref="leftTreeRef" :data="leftTreeData" show-checkboxnode-key="id" :props="props.defaultProps" v-slot="{ node, data }" accordion:check-strictly="true"@check="onCheckLeft" default-expand-all><div>{{ data.label }}</div></el-tree></div></div><!-- 中间按钮 --><div class="btnDiv"><div class="mg10"><el-button @click="toRight()" icon="ele-Right" type="primary"  circle :disabled="leftOperation.length < 1"/></div><div class="mg10"><el-button @click="toLeft()" icon="ele-Back" type="primary" circle :disabled="rightOperation.length < 1"/></div></div><!-- 右边 --><div class="rightTree"><div class="list"><div class="left_lowline"><div class="leftcheck_con"><el-checkbox v-model="checkedRight" :disabled="rightTreeData.length < 1" label="" size="large"style="margin-right: 12px" @change="rightAllCheck" /><p class="left_title">{{ props.title[1] }}</p></div><div>{{ rightOperation.length }}/{{ rightAllselectIdarry.length }}</div></div><el-tree ref="rightTreeRef" :data="rightTreeData" show-checkbox node-key="id":props="props.defaultProps" v-slot="{ node, data }" accordion :check-strictly="true"@check="onCheckRight" default-expand-all><div>{{ data.label }}</div></el-tree></div></div></div></template><script setup lang="ts">import { ref, onMounted, watch, nextTick } from 'vue';import lodash from 'lodash-es'const props = defineProps(['fromData', 'toData', 'defaultProps', 'title', 'visible']);const checkedLeft = ref(false)const checkedRight = ref(false)const leftOperation = ref<any[]>([])const rightOperation = ref<any[]>([])// 定义emitconst emits = defineEmits(['addStaffchange']);const leftTreeRef = ref();const rightTreeRef = ref();// 左侧数据const leftTreeData = ref([] as any);// 右侧数据const rightTreeData = ref([] as any);// 左侧可以选中id集合const leftAllselectIdarry = ref([] as any)// 右侧可以选中id集合const rightAllselectIdarry = ref([] as any)watch(props,newVal => {leftTreeData.value = lodash.cloneDeep(newVal.fromData)rightTreeData.value = lodash.cloneDeep(newVal.toData)// 获取左侧的全选中的idleftAllselectIdarry.value = getAllIds(leftTreeData.value, [])if (newVal.visible) {checkedLeft.value = falsecheckedRight.value = falseleftOperation.value = []rightOperation.value = []nextTick(() => {leftTreeRef?.value.setCheckedKeys([])})}},{ immediate: true })defineExpose({leftTreeData,rightTreeData})onMounted(() => {})// 去右边const toRight = async () => {const leftTree = leftTreeRef.value;if (!leftTree) {return}const leftNodes = leftTree.getCheckedNodes(false, false)const checkedKeys = leftTree.getCheckedKeys(false)const rightTree = rightTreeRef.valueconst newArr = rightTreeData.value.concat(leftNodes)let obj = {};let peon = newArr.reduce((cur,next) => {obj[next['id']] ? "" : obj[next['id']] = true && cur.push(next);return cur;},[]) //设置cur默认类型为数组，并且初始值为空的数组const getnewleftArry = peon.map(item => {return {id: item.id,label: item.label,pid: item.pid,children: [],}})rightTreeData.value = getnewleftArryleftOperation.value = leftTreeRef.value?.getCheckedKeys(false)emits('addStaffchange', checkedKeys)setTimeout(() => {rightTree?.setCheckedNodes(leftNodes);rightOperation.value = rightTreeRef.value?.getCheckedKeys(false)rightAllcheckChange()}, 500)};// 去左边const toLeft = async () => {const rightTree = rightTreeRef.valueif (!rightTree) {return}const checkedKeys = rightTree.getCheckedKeys(false)for(var i=0; i<rightTreeData.value.length;i++){if(checkedKeys.includes(rightTreeData.value[i].id)){rightTreeData.value.splice(i,1)i-=1}}rightOperation.value = rightTree?.getCheckedKeys(false)if (rightTreeData.value && rightTreeData.value.length === 0) {checkedRight.value = false}emits('addStaffchange', getAllIds(rightTreeData.value, []))};//左侧选中const onCheckLeft = () => {leftOperation.value = leftTreeRef.value?.getCheckedKeys(false)if (leftOperation.value.length === leftAllselectIdarry.value.length) {checkedLeft.value = true} else {checkedLeft.value = false}}// 右侧选中const onCheckRight = () => {rightOperation.value = rightTreeRef.value?.getCheckedKeys(false)rightAllselectIdarry.value.length = getAllIds(rightTreeData.value, []).lengthrightAllcheckChange()}// 右侧是否全选获取function rightAllcheckChange () {rightAllselectIdarry.value.length = getAllIds(rightTreeData.value, []).lengthif (rightOperation.value.length === rightAllselectIdarry.value.length) {checkedRight.value = true} else {checkedRight.value = false}return checkedRight.value}// 左侧全选中值 const leftAllCheck = () => {if (checkedLeft.value) {leftTreeRef.value.setCheckedKeys(getAllIds(leftTreeData.value, []))checkedLeft.value = true;} else {leftTreeRef.value.setCheckedKeys([])checkedLeft.value = false}leftOperation.value = leftTreeRef.value?.getCheckedKeys(false)}// 右侧全选中值 const rightAllCheck = () => {if (checkedRight.value) {rightTreeRef.value.setCheckedKeys(getAllIds(rightTreeData.value, []))checkedRight.value = true} else {rightTreeRef.value.setCheckedKeys([])checkedRight.value = false}rightOperation.value = rightTreeRef.value?.getCheckedKeys(false)}// 递归获取所有id数据function getAllIds(tree, result) {//遍历树获取id数组for (const i in tree) {if (!tree[i].disabled) {result.push(tree[i].id); // 遍历项目满足条件后的操作}if (tree[i].children) {// 存在子节点就递归getAllIds(tree[i].children, result);}}return result;}</script><style scoped lang="scss">.treeTransfer {display: flex;justify-content: center;.el-tree {overflow: auto;max-height: 360px;}.leftTree {border: 1px solid #ebeef5;width: 40%;height: calc(100% - 60px);overflow: auto;}.left_lowline {display: flex;align-items: center;justify-content: space-between;background: #f5f7fa;padding: 0 23px 0 10px;.leftcheck_con {display: flex;align-items: center;}}.btnDiv {width: 20%;height: calc(100% - 60px);text-align: center;margin: auto 0;line-height: 40px;position: relative;}.rightTree {width: 40%;height: calc(100% - 60px);}}</style>
2，具体使用如下
<treeTransfetr ref="treeTransferRef" :fromData="fromData":toData="toData":visible="visible":defaultProps="transferProps" @addStaffchange="addStaffchange" :title="['筛选结果', '添加人员']"></treeTransfetr>let treeTransferRef = ref(); // 树形穿梭框
let fromData = ref([{id: "1",pid: 0,    //自定义pid的参数名，默认为"pid" 必填：falselabel: "张三-D1-DM",disabled: false,children: [{id: "1-1",pid: "1",label: "李四-D1-TL",disabled: false,children: []},{id: "1-2",pid: "1",label: "王五-D2-TL",disabled: false,children: [{id: "1-2-1",pid: "1-2",children: [],label: "赵六-D3-TL",disabled: true,},{id: "1-2-2",pid: "1-2",children: [],label: "李明-D4-TL",disabled: false,},{id: "1-2-3",pid: "1-2",children: [],label: "王三明-D5-TL",disabled: false,}]}]}
]); // 树形数据
let toData = ref([]); // 选中的ids数据
const transferProps = ref({label: 'label',children: 'children',disabled: 'disabled',
});

如果我们想要用插件实现，推荐使用el-tree-transfer

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/711559.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【从Python基础到深度学习】9.Python 语法基础

【从Python基础到深度学习】9.Python 语法基础

一、常量与变量 常量:程序中使用的具体的数、字符。在运行过程中&#xff0c;值无法更改 变量:表示一一个存储单元&#xff0c;其中存储的值可以修改 如&#xff1a;a5,b6 变量命名: 1、只能包含字母、数字、下划线 2、只能以字母、下划线开头 3、不要使用关键字作为变量名称 …
阅读更多...
不知道伦敦银模拟账户该如何使用？至少3个用法

不知道伦敦银模拟账户该如何使用？至少3个用法

由于模拟交易的特别属性&#xff0c;很多人对模拟交易并不用心&#xff0c;假的资金用心干什么&#xff1f;就算交易得再好&#xff0c;盈利得再多&#xff0c;假的资金会变成真的吗&#xff1f;因此当然不会这么用心对待伦敦银模拟账户交易账户。实际上&#xff0c;这种观点是…
阅读更多...
List集合的Stream流式操作实现数据类型转换

List集合的Stream流式操作实现数据类型转换

目录 问题现象&#xff1a; 问题分析&#xff1a; 解决方法&#xff1a; 拓展&#xff1a; 1、Collectors.toList() 2、Collectors.toCollection(ArrayList::new) 3、Collectors.toCollection(LinkedList::new) 4、Collectors.toCollection(LinkedHashSet::new) 5、Collector…
阅读更多...
MAC M1 安装mongodb7.0.5 版本

MAC M1 安装mongodb7.0.5 版本

1、进入官网 Download MongoDB Community Server | MongoDBDownload MongoDB Community Server non-relational database to take your next big project to a higher level!https://www.mongodb.com/try/download/community 2、选择版本 3、下载后解压 放到 /usr/local 并修改…
阅读更多...
Facebook Messenger链接分享：如何创建链接并设置自动化内容

Facebook Messenger链接分享：如何创建链接并设置自动化内容

Facebook Messenger链接是指基于Facebook用户名创建的会话链接&#xff0c;用户可以在其Facebook页面的设置部分复制此链接进行分享。然后将该链接直接粘贴到独立站、电子邮件、名片或社交媒体中&#xff0c;让目标受众可以一键进入对话。为了满足某些商家的需求&#xff0c;Fa…
阅读更多...
vue3中的ref和reactive的区别

vue3中的ref和reactive的区别

vue3中的ref和reactive的区别 1、响应式数据2、ref3、reactive4、ref VS reactive5、往期回顾总结&#xff1a; 1、响应式数据 处理响应式数据时到底是该用ref还是reactive... 响应式数据是指在 Vue.js 中&#xff0c;当数据发生变化时&#xff0c;相关的视图会自动更新以反映…
阅读更多...
【bash】2、手把手实现一个 bash shell：多个机器批量执行 shell 命令，支持 ip 补全

【bash】2、手把手实现一个 bash shell：多个机器批量执行 shell 命令，支持 ip 补全

文章目录 一、需求&#xff1a;多台机器批量远程执行 shell 命令1.1 业务需求拆解为脚本需求1.2 帮助函数&#xff1a;使用说明文档1.3 main 函数框架 二、功能&#xff1a;单机 sshp 执行2.1 fullip 函数&#xff1a;实现 ip 补全2.1.1 参数说明2.1.2 定义全局变量2.1.3 实现&…
阅读更多...
Pytorch 复习总结 4

Pytorch 复习总结 4

Pytorch 复习总结&#xff0c;仅供笔者使用&#xff0c;参考教材&#xff1a; 《动手学深度学习》Stanford University: Practical Machine Learning 本文主要内容为&#xff1a;Pytorch 深度学习计算。 本文先介绍了深度学习中自定义层和块的方法&#xff0c;然后介绍了一些…
阅读更多...
基于Beego 1.12.3的简单website实现

基于Beego 1.12.3的简单website实现

参考 用Beego开发web应用 https://www.cnblogs.com/zhangweizhong/p/10919672.htmlBeego官网 Homepage - beego: simple & powerful Go app frameworkbuild-web-application-with-golang https://github.com/astaxie/build-web-application-with-golang/blob/master/zh/pr…
阅读更多...
源码的角度分析Vue2数据双向绑定原理

源码的角度分析Vue2数据双向绑定原理

什么是双向绑定 我们先从单向绑定切入&#xff0c;其实单向绑定非常简单&#xff0c;就是把Model绑定到View&#xff0c;当我们用JavaScript代码更新Model时&#xff0c;View就会自动更新。那么双向绑定就可以从此联想到&#xff0c;即在单向绑定的基础上&#xff0c;用户更新…
阅读更多...
微信开发者工具-代码管理和码云Github远程仓库集成

微信开发者工具-代码管理和码云Github远程仓库集成

目录 思考&#xff1a;IDE如何进行代码管理 代码管理方式 一、自身提供服务 二、Git 扩展 1、环境准备 2、创建项目代码 3、进行项目Git初始化 4、在码云新建远程仓库 5、将项目进行远程仓库关联 三、SVN扩展 四、代码管理 思考&#xff1a;IDE如何进行代码管理 初识开…
阅读更多...
StarRocks实战——贝壳找房数仓实践

StarRocks实战——贝壳找房数仓实践

目录 前言 一、StarRocks在贝壳的应用现状 1.1 历史的数据分析架构 1.2 OLAP选型 1.2.1 离线场景 1.2.2 实时场景 1.2.3 StarRocks 的引入 二、StarRocks 在贝壳的分析实践 2.1 指标分析 2.2 实时业务 2.3 可视化分析 三、未来规划 3.1 StarRocks集群的稳定性 3…
阅读更多...
PMP考试培训费用多少钱？

PMP考试培训费用多少钱？

PMP考试的相关费用包括报名费用、培训费用和证书续证费用三个部分。 一、PMP考试报名费用&#xff1a; 首次报考费用为3900元&#xff0c;如果未通过考试可以在英文报名有效期内进行补考报名&#xff0c;补考费用为2500元。 付费方式是在项目管理学会官方网站上提交报考资料…
阅读更多...
企业数字化转型的第一步：由被动多云向主动多云转变

企业数字化转型的第一步：由被动多云向主动多云转变

随着经济环境、市场形势、技术发展、用户需求等诸多因素的变化&#xff0c;数字化转型为企业进一步提升效率和竞争力、提供更加丰富的个性化产品和服务、进行业务场景创新、探寻新的增长机会和运营模式提供了崭新的途径。越来越多的企业意识到&#xff0c;数字化转型已不是企业…
阅读更多...
第1篇 Linux Docker安装rabbitmq

第1篇 Linux Docker安装rabbitmq

Docker安装RabbitMq 1、搜索rabbitmq镜像 docker search rabbitmq2、下载rabbitmq镜像 docker pull rabbitmq3、运行rabbitmq服务 docker run -d --name rabbitmq --restart always -p 15672:15672 -p 5672:5672 rabbitmq4、访问rabbitmq http://192.168.1.x:15672 5、rab…
阅读更多...
亚信安慧AntDB：打破数据孤岛，实现实时处理

亚信安慧AntDB：打破数据孤岛，实现实时处理

AntDB数据库以其独特的创新能力在分布式数据库领域引领潮流。其中&#xff0c;融合统一与实时处理是其两大核心创新能力&#xff0c;为其赢得广泛关注与赞誉。融合统一意味着AntDB能够将多种不同类型的数据库融合为一体&#xff0c;实现数据的统一管理与处理&#xff0c;极大地…
阅读更多...
电视盒子什么品牌好？资深数码粉强推口碑电视盒子推荐

电视盒子什么品牌好？资深数码粉强推口碑电视盒子推荐

我对各类数码产品是非常熟悉的&#xff0c;尤其是电视盒子&#xff0c;用过超十五款了&#xff0c;涵盖了各个主流品牌&#xff0c;最近看到很多朋友在讨论不知道电视盒子什么品牌好&#xff0c;我这次要来分享的就是口碑最好的五款电视盒子推荐给各位不懂如何选电视盒子的新手…
阅读更多...
AI、AIGC、AGI、ChatGPT它们的区别？

AI、AIGC、AGI、ChatGPT它们的区别？

今天咱们聊点热门话题&#xff0c;来点科普时间——AI、AIGC、AGI和ChatGPT到底是啥&#xff1f;这几个词听起来好像挺神秘的&#xff0c;但其实它们就在我们生活中。让我们一起探索这些术语的奥秘&#xff01; AI&#xff08;人工智能&#xff09;&#xff1a;先说说AI&#…
阅读更多...
电梯物联网之梯控相机方案-防止电瓶车进电梯

电梯物联网之梯控相机方案-防止电瓶车进电梯

梯控现状 随着电梯产品在智能化建筑的日益普及,对于电梯的智能化管理 安全性需求 的要求越来越迫切。尤其今年来随着电瓶车的大量普及&#xff0c;发起多起楼道、轿厢电瓶车着火恶性事件&#xff0c; 造成了极大的社会 负面影响。控制电瓶车进入单元门&#xff0c;楼道以及电梯…
阅读更多...
Vue官网“食用指南”

Vue官网“食用指南”

把Vue官网当做一个工具来用&#xff0c;有问题&#xff0c;先来官网查一查。 官网中常用的板块 官网&#xff1a;https://cn.vuejs.org/上手后&#xff0c;最常用的模块是【快速上手】【API】。所以务必要知道这两个模块在哪里&#xff0c;怎么使用。![image.png](https://img…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023