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.pswp.cn/news/711559.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/711559.shtml
英文地址，請注明出處：http://en.pswp.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;這種觀點是…
閱讀更多...
Python 操作數據結構隊列 queue和 雙端隊列 deque

Python 操作數據結構隊列 queue和 雙端隊列 deque

“”" 隊列&#xff08;Queue&#xff09;和雙端隊列&#xff08;Deque, Double-ended Queue&#xff09;都是線性數據結構&#xff0c;但它們在操作上有所不同&#xff1a; 隊列&#xff08;Queue&#xff09;&#xff1a; 隊列遵循先進先出&#xff08;FIFO, First-In…
閱讀更多...
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 實現&…
閱讀更多...
Cu-HCP-H035 Cu-HCP-R250銅合金高精度零部件

Cu-HCP-H035 Cu-HCP-R250銅合金高精度零部件

Cu-HCP-H035 Cu-HCP-R250銅合金高精度零部件 CDA102-3/4H EN1982-CC333G EN1982-CC492K BS1400-LG4 EN1982-CC491K BS1400-LG2 CuNi18Zn19Pb1/CW408J CuNi12Zn38Mn5Pb2/CW407J CuNi12Zn30Pb1/CW406J CuNi12Zn29/CW405J CuNi12Zn25Pb1/CW404J CuNi10Zn42Pb2/CW402J CuNi10Zn27/C…
閱讀更多...
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如何進行代碼管理 初識開…
閱讀更多...
服務器部署測試環境回顧與改進建議

服務器部署測試環境回顧與改進建議

任務概述&#xff1a; 原計劃在2小時內完成的任務&#xff0c;由于遇到一系列挑戰&#xff0c;最終耗時1.5天。任務目標是在無外網環境的服務器上建立測試環境&#xff0c;涉及將SSD硬盤數據遷移至服務器、SSH連接、運行測試程序并監控服務器功耗。 高效實施策略&#xff1a;…
閱讀更多...
fs讀取目錄、文件

fs讀取目錄、文件

fs讀取文件 process.cwd() 是 Node.js 中的一個方法&#xff0c;它返回 Node.js 進程的當前工作目錄。這個工作目錄通常是啟動 Node.js 進程時所在的目錄。 const fs require(fs); const path require(path);// 讀取指定目錄 const configPath path.join(process.cwd(), c…
閱讀更多...
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;極大地…
閱讀更多...
最新文章

Copyright @ 2022~2023