关键词：
<div class="organizational">
<el-dialog
:title="dialogTitle"
:visible.sync="addDialogVisible"
v-if="addDialogVisible"
:before-close="handleClose"
:close-on-click-modal="false"
width="80%">
<tree-transfer
ref="mytree"
:sourceData="sourceData"
:targetData="targetData"
@detach="detach"
@shuttle="shuttle"
@target_expand="targetExpand"
@source_expand="sourceExpand"
@target-check-change="targetCheckChange"
@target-check="targetCheck"
@source-check-change="sourceCheckChange"
@source-check="sourceCheck"
@source-click="sourceClick">
</tree-transfer>
<div slot="footer" class="dialog-footer">
<el-button size="medium" type="primary" @click="addSubmit">确定</el-button>
<el-button size="medium" @click="addDialogVisible = false">取消</el-button>
</div>
</el-dialog>
</div>
<!--树形穿梭框组件-->
<template>
<el-row :gutter="20">
<el-col :span="11">
<el-card class="box-card">
<div slot="header" class="w-title clearfix">
<span>主维度系统数据
<el-switch v-model="isOnly" class="switch"></el-switch>
<span>
<em>isOnly ? ‘移动不包含子机构‘ : ‘移动包含子机构‘</em>
</span>
</span>
</div>
<el-tree
:data="sourceData"
show-checkbox
default-expand-all
node-key="id"
ref="sourceTree"
highlight-current
:check-strictly="isOnly"
:props="defaultProps"
@check-change="sourceCheckChange"
@check="sourceCheck"
@node-expand="sourceExpand"
@node-click="sourceClick">
</el-tree>
</el-card>
</el-col>
<el-col :span="2" style="margin-top:1%;">
<div style="text-align: center;">
<el-button type="primary" icon="el-icon-back" circle @click="detach" :disabled="l_mutilCk"></el-button>
<el-button type="primary" icon="el-icon-right" circle @click="shuttle" :disabled="r_mutilCk"></el-button>
</div>
</el-col>
<el-col :span="11">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>子维度系统数据</span>
</div>
<el-tree
:data="targetData"
show-checkbox
default-expand-all
node-key="id"
ref="targetTree"
:check-strictly="false"
highlight-current
@check="targetCheck"
@node-expand="targetExpand"
@node-click="targetClick"
:props="defaultProps">
</el-tree>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default
name: ‘mytreeTransfer‘,
props: ["defaultProps", "sourceData", "targetData"],
data()
return
s_AllChecked: false,
s_disabled: false,
s_indeterminate: false,
l_mutilCk:true,
t_AllChecked: false,
t_indeterminate: false,
t_disabled: false,
r_mutilCk:true,
create_tree:,
isOnly:false,
,
methods:
targetClick(data,node,com)this.$emit("target_click",data,node,com),
sourceClick(data,node,com)this.$emit("source_click",data,node,com),
targetExpand(data,node,com) this.$emit("target_expand",data,node,com),
sourceExpand(data,node,com) this.$emit("source_expand",data,node,com),
s_checkAllChange(args)
this.s_AllChecked = args;
this.checkAll(this.sourceData, args, ‘source‘);
this.s_indeterminate = false;
,
t_checkAllChange(args)
this.t_AllChecked = args;
this.checkAll(this.targetData, args, ‘target‘);
this.t_indeterminate = false;
,
targetLoad(node, resolve)
// console.log(node);
,
sourceCheck(data, checked)
this._sourceCheckAll();
this.isDisabledArrow();
this.$emit("source-check", data, checked )
,
sourceCheckChange(data, checked, indeterminate)
this.$emit("source-check-change", data,checked,indeterminate)
,
_sourceCheckAll()
this.checkAllButtonStatus(‘sourceTree‘);
,
targetCheck(data, checked)
this._tagetCheckAll();
this.isDisabledArrow();
this.$emit("target-check", data, checked)
,
isDisabledArrow()
let targetTree=this.$refs.targetTree.getCheckedNodes().length;
let sourceTree=this.$refs.sourceTree.getCheckedNodes().length;
this.l_mutilCk= (targetTree>0)?false:true;
this.r_mutilCk= (targetTree<2&&sourceTree>0)?false:true;
,
targetCheckChange(data, checked, indeterminate)
this.$emit("target-check-change", data, checked, indeterminate)
,
_tagetCheckAll()
this.checkAllButtonStatus(‘targetTree‘);
,
checkAllButtonStatus(args=‘sourceTree‘)
let banxuan = this.$refs[args].getHalfCheckedNodes();
let checknode = this.$refs[args].getCheckedNodes();
let isAllCk= (banxuan.length == 0 && checknode.length > 0);
let isIndeterminate= banxuan.length > 0 ? true : false;
if(args==‘sourceTree‘)
this.s_AllChecked =isAllCk
this.s_indeterminate =isIndeterminate;
else
this.t_AllChecked = isAllCk;
this.t_indeterminate = isIndeterminate;
,
//左箭头 移除事件
detach()
let sourceTree = this.$refs.sourceTree;
let targetTree = this.$refs.targetTree;
let sourceCurrent = sourceTree.getCheckedNodes();
let targetCurrent = targetTree.getCheckedNodes();
let havaChild=targetCurrent.filter(item=>item.hasOwnProperty(‘children‘))
let noChild=targetCurrent.filter(item=>!item.hasOwnProperty(‘children‘))
targetCurrent.forEach(item=>
this.deepDisableFn(this.sourceData, item.id, false);
targetTree.remove(item);
)
this.$refs.sourceTree.setCheckedKeys(targetCurrent.map(item=>item.id));
this.$emit("detach", targetCurrent);
,
//右箭头 穿梭事件
shuttle()
//禁用左侧数据同时判断右侧结构
let sourceTree = this.$refs.sourceTree;
let targetTree = this.$refs.targetTree;
let sourceCurrent = sourceTree.getCheckedNodes(false,false);
let targetCurrent = targetTree.getCheckedNodes();
if (sourceCurrent.length > 0)
let haveChild=[],notChild=[];
if(!this.isOnly)
sourceCurrent.forEach(item =>
let newItem=JSON.parse(JSON.stringify(item));
if(newItem.hasOwnProperty(‘children‘)) haveChild.push(newItem);
else notChild.push(newItem);
this.deepDisableFn(this.sourceData, item.id, true);
);
haveChild.forEach(element=>
let obj=this.createTree(element,notChild);
element=obj.element;
notChild=obj.noC;
);
let newArray=[].concat(haveChild);
for (var i = 0; i < newArray.length; i++)
for (var j = 0; j < newArray[i].children.length; j++)
newArray.forEach((item,index)=>
if(newArray[i].children[j].id==item.id)
haveChild.splice(haveChild.indexOf(item),1)
)
newArray=[];
else
sourceCurrent.forEach(item =>
let newItem=JSON.parse(JSON.stringify(item));
delete newItem.children;
notChild.push(newItem);
this.deepDisableFn(this.sourceData, item.id, true);
);
let meryAry=[...notChild,...haveChild];
if (targetCurrent.length > 0)meryAry.forEach(item=> targetTree.append(item,targetCurrent[0].id)) ; //targetTree.updateKeyChildren(targetCurrent[0].id, meryAry);
else meryAry.forEach(item=> this.targetData.push(item));
this.$refs.sourceTree.setCheckedKeys([]);
// setTimeout(()=> meryAry.forEach(item=> this.$refs.targetTree.setCheckedKeys([item.id])),100)
this.$emit("shuttle", sourceCurrent);
,
createTree(element,noC)
let newNoC=[],obj=;
noC.forEach((item,index)=>
delete item.disabled;
if(item.id==element.id) noC.splice(noC.indexOf(item),1);
)
delete element.disabled;
if(element.hasOwnProperty(‘children‘))
element.children.forEach(nodeItem=>
let obj=this.createTree(nodeItem,noC);
nodeItem=obj.element
noC=obj.noC;
)
return element,noC;
,
deepDisableFn(treeData, id, bool)
for (let i = 0; i < treeData.length; i++)
if (treeData[i].id == id)
treeData[i].disabled = bool;
break;
else
if (treeData[i].hasOwnProperty("children"))
this.deepDisableFn(treeData[i].children, id, bool);
,
targetPut(id, data,bool=true)
let tree=this.$refs.targetTree;
tree.append(data,id);
if(bool) setTimeout(()=>tree.setCheckedKeys([id]),100);
,
sourcePut(id, data,bool=true)
let tree=this.$refs.sourceTree;
tree.append(data,id);
if(bool) setTimeout(()=>tree.setCheckedKeys([id]),100);
,
verdictAllDisable(treeData)
let bool = true;
for (let i = 0; i < treeData.length; i++)
if (treeData[i].disabled != true)
bool = false
break;
if (treeData[i].hasOwnProperty("children") && bool)
bool = this.verdictAllDisable(treeData[i].children);
return bool;
,
checkAll(treeData, bool, type = ‘source‘)
console.log("调用选中",treeData, bool, type);
for (let i = 0; i < treeData.length; i++)
if (treeData[i].disabled != true)
if (type == ‘source‘) this.$refs.sourceTree.setChecked(treeData[i].id, bool);
else this.$refs.targetTree.setChecked(treeData[i].id, bool);
if (treeData[i].hasOwnProperty("children"))
this.checkAll(treeData[i].children, bool, type);
</script>
<style lang="less" scoped>
/deep/ .el-tree-node>.el-tree-node__children
overflow: auto;
/deep/ .el-col-11
height:650px;
/deep/ .el-card
height:100%;
/deep/ .el-tree
height:650px;
overflow:overlay;
.switch
margin-left:10px;
.w-title em
font-size:12px;
font-style:normal;
margin-left:5px;
</style>
element穿梭框transfer与进度条组件绑定(代码片段)
...程三、完整代码总结前言最近做的后台管理系统里使用了Element组件Transfer做了一个工作表,然后加了一个进度条来表示工作进度,我希望能将两者绑定起来;一、实现原理利用Element穿梭框提供的change事件来触发特定方法handleChange(),... 查看详情
element-ui的组件改造的树形选择器（树形下拉框）
参考技术A下拉框选择数据三级嵌套展示 查看详情
如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索
1.汉字：直接添加对应的 filterable2.拼音：穿梭框和选择器的实现方式有所不同 选择器：<1>下载pinyin-match: npmi--savepinyin-match<2>在main.js引入并注册为全局属性 importPinyinMatchfrom‘pinyin-match‘;... 查看详情
数据量庞大的分页穿梭框实现(代码片段)
...，从而解决数据量庞大的问题我之前写过一篇博客：关于Element组件的穿梭框的重构介绍并实现的方法但是第二个分页的demo没有，在上一家公司匆匆解决后，没有写入自己的GitHub，有点可惜...当时可是在上班，而且太忙了，不过... 查看详情
element穿梭框点击后异步
对于您这个element穿梭框点击后异步问题解答，Element穿梭框点击后异步，一般有如下几种实现方式：1.使用Ajax异步请求：将穿梭框的点击事件进行绑定，触发后发起Ajax异步请求，请求后台接口获取数据，再做相应的处理，用于展... 查看详情
vue+elementtree(树形控件)组件(代码片段)
...代码和一个调用它的父组件的代码，接口接收数据直接传element直接能用的，也就是经过上一章函数处理过的数据以下是代码父组件<template><commonfiltertree:placeholder="placeholder":data="data":showCheckbox="showCheckbox"@check=‘getcheckdata‘:... 查看详情
vue-table-with-tree-grid的树形表格组件如何使用
平时我们用element-ui组件库的时候，用的很多组件都可以解决日常工作中的需要，今天遇到了一个需要搭建一个树形结构的表格，但element组件没有提供，这时就需要自己去通过第三方组件来实现这个功能了。(如图... 查看详情
vue手写element提示框组件(confirm)(代码片段)
效果图流程 组件 <template><divclass="xtx-confirm":class="fade"><divclass="wrapper":class="fade"><divclass="header">< 查看详情
transfer穿梭框组件-基于layui
在线体验github:https://github.com/9499574/layui-transfer 查看详情
elementui组件中穿梭框内容显示不全解决方式
...mentui时，很多组件自带的样式并不能满足功能需求，比如穿梭框数据内容过长，如下： 解决方式有两种：1.改变穿梭框的宽度，在工程中全文搜索.el-transfer-panel，找到定义这个类的地方，修改宽度。2.鼠标移入数据... 查看详情
sciter封装穿梭器组件总结
...ter穿梭器组件封装总结以下穿梭器组件分为两种，一种是树形结构穿梭器，另外一种是列表结构穿梭器。最终实现的效果：调用方可以通过抛出方法，对组件进行初始化，配置参数。组件根据参数生成相关组件。穿梭器实现的功... 查看详情
sciter封装穿梭器组件总结
...ter穿梭器组件封装总结以下穿梭器组件分为两种，一种是树形结构穿梭器，另外一种是列表结构穿梭器。最终实现的效果：调用方可以通过抛出方法，对组件进行初始化，配置参数。组件根据参数生成相关组件。穿梭器实现的功... 查看详情
ivew穿梭框transfer组件高亮显示操作值(代码片段)
项目场景：Transfer（穿梭框），双栏穿梭选择框，常用于将多个项目从一边移动到另一边。这个组件在多个数据之间选择时非常方便。所有的控制都由组件完成，只需要最后保存组件目标值即可。问题描述&... 查看详情
vue实现树形下拉框(代码片段)
Vue自身并没有实现树形下拉框的组件，找了很多资料，最后在Github上找了个插件vue-treeselect，功能还是比较全的，模糊搜索、多选、延迟加载、异步搜索、排序，自定义、Vuex支持等等。这些功能在官网上都有详细的介绍：vue-trees... 查看详情
循序渐进vue+element前端应用开发(6）---常规element界面组件的使用
...篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用，使得我们对如何利用Element组件有一个大概的认识。1、列表界面和其他模块展示处理在前面随笔《循序渐进VUE+Element前端应用开发(5）---表格列表页 查看详情
循序渐进vue+element前端应用开发(6）---常规element界面组件的使用
...篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用，使得我们对如何利用Element组件有一个大概的认识。1、列表界面和其他模块展示处理在前面随笔《循序渐进VUE+Element前端应用开发(5）---表格列表页 查看详情
element穿梭框自定义数据记录
参考技术A因为上方还有选项，实现当选择时间的时候出餐日期就会显示，没有的话就隐藏出餐日期列，所以需要根据条件判断一下是否显示，所以就用到了<spanslot-scope="option"></span>来自定义数据项，我本来想用el... 查看详情
前端面试题vue-element汇总
【Vue-element】[vue-element]ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？[vue-element]你有二次封装过ElementUI组件吗？[vue-element]ElementUI怎么修改组件的默认样式？[vue-element]ElementUI的穿梭组件如果数据... 查看详情