el-tree-transfer-vue3/dist/el-tree-transfer-vue3.umd.ts

## 简介 v1.0.0 el-tree-fransfer-vue3 是一个基于 VUE3 和 elementPlus 的树形穿梭框组件，使用前请确认已经引入[element-plus](https://element-plus.org/zh-CN/guide/installation.html)！ 此组件功能类似于`element-plus`的[transfer](https://element-plus.org/zh-CN/component/transfer.html)组件，但是里面的数据是树形结构

(function(t,N){typeof exports=="object"&&typeof module<"u"?module.exports=N(require("vue")):typeof define=="function"&&define.amd?define(["vue"],N):(t=typeof globalThis<"u"?globalThis:t||self,t["el-tree-transfer-vue3"]=N(t.Vue))})(this,function(t){"use strict";const N={width:{type:String,defaulte:"100%"},height:{type:String,defaulte:"320px"},from_title:{type:String},to_title:{type:String},from_data:{type:Array,default:[]},to_data:{type:Array,default:[]},defaultProps:{type:Object,default:()=>({label:"label",children:"children"})},node_key:{type:String,default:"id"}};function f(e){for(var l=0;l<e.length;l++)if(e[l].children!=null){var o=e[l].children;delete e[l].children;for(var n=0;n<o.length;n++)e.push(o[n])}return F(e,"id")}function V(e,l){let o=[];return e.forEach(n=>{n.pid===l&&n.children.length>0&&(n.children=[]),o.push(n)}),o}function d(e){let l;try{l=e.push?[]:{}}catch{l={}}for(let o in e)typeof e[o]=="object"?l[o]=d(e[o]):l[o]=e[o];return l}function y(e,l){const o=f([...e,...l]);return v(F(o,"id"),0)}function _(e,l){const o=l.map(n=>{if(n.pid!==0)return n.id});return console.error(o),e=e.filter(function(n){return o.indexOf(n.id)==-1}),y(e,[])}function v(e,l){let o=[];if(e&&e.length>0){for(let n of e)if(n.pid==l){let s={},i=b(n.id,e);i&&i.length>0&&(s.children=i),s=Object.assign(n,s),o.push(s)}}return o}function b(e,l){let o=[];if(l&&l.length>0){for(let n of l)if(n.pid==e){let s={},i=b(n.id,l);i&&i.length>0&&(s.children=i),s=Object.assign(n,s),o.push(s)}}return o}function F(e,l){let o={},n=[];for(let s=0;s<e.length;s++){const i=e[s];o[i[l]]||(o[i[l]]=n.push(i))}return n}const D=t.defineComponent({name:"el-tree-transfer",props:N,setup(e,{emit:l}){const o=t.ref(),n=t.ref(),s=t.ref(""),i=t.ref(""),c=t.ref([]),h=t.ref([]),p=t.ref(!1),k=t.ref(!1),C=t.ref(!1),u=t.ref(!1),P=()=>{if(C.value)l("addBtn",[]),l("removeBtn",y(e.from_data,e.to_data));else{const r=y(d(c.value),f(d(e.to_data)));l("removeBtn",r),console.log(r);const a=_(f(d(e.from_data)),f(d(c.value)));let m=[];a.filter(g=>g.children==null||!g.children?void 0:m.push(g)),l("addBtn",m)}c.value=[]},U=()=>{if(u.value)l("removeBtn",[]),l("addBtn",y(e.from_data,e.to_data));else{const r=y(d(h.value),f(d(e.from_data)));l("addBtn",r),console.log(r);const a=_(f(d(e.to_data)),f(d(h.value)));let m=[];a.filter(g=>g.children==null||!g.children?void 0:m.push(g)),l("removeBtn",m)}h.value=[]},z=r=>{console.log(r)},q=r=>{console.log(r)},R=r=>{if(r){o.value.setCheckedNodes(e.from_data,!1);const a=o.value.getCheckedNodes(!1,!1),m=V(d(a),0);c.value=f(m)}else{o.value.setCheckedNodes([],!1);const a=o.value.getCheckedNodes(!1,!1);c.value=a}},G=r=>{if(r){n.value.setCheckedNodes(e.to_data,!1);const a=n.value.getCheckedNodes(!1,!1),m=V(d(a),0);h.value=m}else{n.value.setCheckedNodes([],!1);const a=n.value.getCheckedNodes(!1,!1);h.value=a}},J=()=>{const r=o.value.getCheckedNodes(!1,!0),a=V(d(r),0);c.value=f(a),console.error(c.value)},K=()=>{const r=n.value.getCheckedNodes(!1,!0),a=V(d(r),0);h.value=f(a)},L=(r,a)=>(console.log(r,a),r?a.label.indexOf(r)!==-1:!0),M=(r,a)=>r?a.label.indexOf(r)!==-1:!0;return t.watch(()=>c.value,()=>{const r=f(d(e.from_data)),a=d(c.value);r.length===a.length&&(C.value=!0,p.value=!1),a.length>0&&r.length>a.length&&(p.value=!0),a.length===0&&(C.value=!1,p.value=!1)}),t.watch(()=>h.value,()=>{const r=f(d(e.to_data)),a=d(h.value);r.length===a.length&&(u.value=!0,k.value=!1),a.length>0&&r.length>a.length&&(k.value=!0),a.length===0&&(k.value=!1,u.value=!1)}),t.watch(()=>s.value,r=>{o.value.filter(r)}),t.watch(()=>i.value,r=>{n.value.filter(r)}),{fromChekAll:C,toChekAll:u,fromtree:o,totree:n,fromFilterText:s,toFilterText:i,isFromIndeterminate:p,isToIndeterminate:k,checkAllFromDataCache:c,checkAllToDataCache:h,fromCheck:J,toCheck:K,add:P,remove:U,fromHandleCheckAllChange:R,toHandleCheckAllChange:G,fromHandleNodeClick:z,toHandleNodeClick:q,fromFilterNode:L,toFilterNode:M}}}),E=(e,l)=>{const o=e.__vccOpts||e;for(const[n,s]of l)o[n]=s;return o},A={class:"transfer-left"},T={class:"transfer-left-title"},w={class:"transfer-left-content"},B={class:"transfer-button"},$={class:"transfer-button-add"},S={class:"transfer-button-remove"},H={class:"transfer-right"},O={class:"transfer-right-title"},j={class:"transfer-right-content"};function I(e,l,o,n,s,i){const c=t.resolveComponent("el-checkbox"),h=t.resolveComponent("el-input"),p=t.resolveComponent("el-tree"),k=t.resolveComponent("el-scrollbar"),C=t.resolveComponent("el-button");return t.openBlock(),t.createElementBlock("div",{class:"mint-transfer transfer",style:t.normalizeStyle({width:e.width,height:e.height})},[t.createElementVNode("div",A,[t.createElementVNode("div",T,[t.createVNode(c,{modelValue:e.fromChekAll,"onUpdate:modelValue":l[0]||(l[0]=u=>e.fromChekAll=u),indeterminate:e.isFromIndeterminate,onChange:e.fromHandleCheckAllChange},null,8,["modelValue","indeterminate","onChange"]),t.createElementVNode("span",null,t.toDisplayString(e.$props.from_title||""),1)]),t.createElementVNode("div",w,[t.createVNode(k,{height:"100%"},{default:t.withCtx(()=>[t.createVNode(h,{class:"transfer-input",modelValue:e.fromFilterText,"onUpdate:modelValue":l[1]||(l[1]=u=>e.fromFilterText=u),placeholder:"输入关键字进行过滤",clearable:""},null,8,["modelValue"]),t.createVNode(p,{style:{"padding-left":"10px"},data:e.$props.from_data,props:e.$props.defaultProps,"show-checkbox":"","node-key":e.$props.node_key,"current-node-key":"current",ref:"fromtree",onCheck:e.fromCheck,"filter-node-method":e.fromFilterNode,onNodeClick:e.fromHandleNodeClick},null,8,["data","props","node-key","onCheck","filter-node-method","onNodeClick"])]),_:1})])]),t.createElementVNode("div",B,[t.createElementVNode("div",$,[t.createVNode(C,{size:"small",type:"primary",disabled:!(e.checkAllFromDataCache.length>0),onClick:e.add},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString("添加"))]),_:1},8,["disabled","onClick"])]),t.createElementVNode("div",S,[t.createVNode(C,{size:"small",type:"primary",disabled:!(e.checkAllToDataCache.length>0),onClick:e.remove},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString("移除"))]),_:1},8,["disabled","onClick"])])]),t.createElementVNode("div",H,[t.createElementVNode("div",O,[t.createVNode(c,{modelValue:e.toChekAll,"onUpdate:modelValue":l[2]||(l[2]=u=>e.toChekAll=u),indeterminate:e.isToIndeterminate,onChange:e.toHandleCheckAllChange},null,8,["modelValue","indeterminate","onChange"]),t.createElementVNode("span",null,t.toDisplayString(e.$props.to_title||""),1)]),t.createElementVNode("div",j,[t.createVNode(k,{height:"100%"},{default:t.withCtx(()=>[t.createVNode(h,{class:"transfer-input",modelValue:e.toFilterText,"onUpdate:modelValue":l[3]||(l[3]=u=>e.toFilterText=u),placeholder:"输入关键字进行过滤",clearable:""},null,8,["modelValue"]),t.createVNode(p,{style:{"padding-left":"10px"},data:e.$props.to_data,props:e.$props.defaultProps,"show-checkbox":"","node-key":e.$props.node_key,ref:"totree",onCheck:e.toCheck,"filter-node-method":e.toFilterNode,onNodeClick:e.toHandleNodeClick},null,8,["data","props","node-key","onCheck","filter-node-method","onNodeClick"])]),_:1})])])],4)}return E(D,[["render",I]])});