树形结构代码:
<div class="modal-body" style="height:350px">
<div class="fileTree">
<el-tree v-cloak show-checkbox default-expand-all
node-key="id"
ref="tree"
@node-click="handleNodeClick"
:data="data"
:props="defaultProps"
check-strictly
:expand-on-click-node="false"
:filter-node-method="filterNode"
class="filter-tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> {{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => editMenu(data)">
编辑菜单
</el-button>
</span>
</el-tree>
</div>
</div>
事件执行入口:
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-sm btn-confirm" @click="getCheckedData">
设为配置文件
</button>
<button type="button" class="btn btn-default btn-sm btn-cancel" data-dismiss="modal">
取消
</button>
<button id="newTree" type="button" class="btn btn-primary btn-sm btn-confirm" @click="toNewTree()">
生成新树
</button>
</div>
二次生成新树模态框代码:
<div class="modal fade" id="newdplyPackageFileTree" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1056;">
<div class="modal-dialog" role="document" id="newFileTree">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="newmyModalLabelForTask">发布包文件结构2</h5>
</div>
<!-- <ul id="fileTree" class="ztree" style="height: 360px;overflow-y: auto;">
</ul> -->
<div class="input-group" style="border-radius:0px;border-bottom:1px solid #ddd;box-shadow:none;">
<input type="text" style="border-radius:0px;border:none;box-shadow:none;" v-model="filterText" class="form-control" placeholder="请输入" aria-describedby="basic-addon2">
<span style="padding:0px 20px;border-radius:0px;background-color:#fff;box-shadow:none;border:none;" class="input-group-addon" id="basic-addon2"><img style='height:30px;' src="${ctx}/images/search_total.png"></span>
</div>
<div class="modal-body" style="height:350px">
<div class="fileTree">
<el-tree v-cloak default-expand-all
node-key="id"
ref="tree"
@node-click="handleNodeClick"
:data="dataNew"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
class="filter-tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> {{ node.label }}</span>
</el-tree>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm btn-cancel" data-dismiss="modal">
取消
</button>
</div>
</div>
</div>
</div>
Vue代码:
<script>
var vm = new Vue({
el:'#fileTree',
data: {
data: [{
name: '加载中......',
}],
checkedId: [],
checkedObj:[], //所有选中节点的 对象数组
defaultProps: { //el-tree默认数据格式
children: 'children',
label: 'name',
},
currentClick:[],
filterText: '', //声明搜索框中初始值为空
newTreeArr:null
},
watch: { //搜索框内容监控(固定方法)
filterText(val) {
this.$refs.tree.filter(val);
}
},
updated() {
// 给多选树设置默认值
this.$refs.tree.setCheckedKeys(this.checkedId);
},
methods:{
dataTranse:function(val){
var that = this;
var sth = val;
console.log('sth>>>>>');
console.log(sth);
var res = dataTrans(sth, function (from, to) {
to.name = from.NAME;
to.id=from.ID;
to.label=from.NAME;
to.disabled = from.DISABLED;
});
that.data = res;
},
//单选树节点获取当前数据的函数
/* clickDeal(currentObj, treeStatus){
this.clickCheck(currentObj, treeStatus,this.$refs.tree);
}, */
/* clickCheck(currentObj, treeStatus, ref) {
var clickObj = currentObj;
this.checkedObj.push(clickObj);
console.log('selected --- obj>>>>>');
console.log(clickObj);
}, */
//子节点-->>>父节点全部一串数据的函数
getCheckedData() {
var aKey = this.getCheckedKeys(this.data, this.$refs.tree.getCheckedKeys(),'ID');
console.log('aKey>>>>>');
console.log(aKey);
//this.newTreeArr = $.extend(true, [], aKey);
//this.newTreeArr.push()
},
//子节点-->>>父节点全部一串数据的函数
getCheckedKeys (data, keys, key) {
var res = [];
recursion(data, false);
return res;
// arr -> 树形总数据
// keys -> getCheckedKeys获取到的选中key值
// isChild -> 用来判断是否是子节点
function recursion (arr, isChild) {
var aCheck = [];
for ( var i = 0; i < arr.length; i++ ) {
var obj = arr[i];
aCheck[i] = false;
if ( obj.children ) {
aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
if ( aCheck[i] ) {
//res.push(obj[key]);//push的key 当前为ID
res.push(obj); //push选中节点的父节点对象数据
}
}
for ( var j = 0; j < keys.length; j++ ) {
if ( obj[key] == keys[j] ) {
aCheck[i] = true;
if ( res.indexOf(obj[key]) == -1 ) {
//res.push(obj[key]);//push的key 当前为ID
//res.push(obj); //push选中的子节点对象数据
}
break;
}
}
}
if ( isChild ) {
return aCheck.indexOf(true) != -1;
}
}
},
//子节点&&父节点全部一串数据的函数
getCheckedDataAll() {
var aKeyAll = this.getCheckedKeysAll(this.data, this.$refs.tree.getCheckedKeys(),'ID');
console.log('aKeyAll>>>>>');
console.log(aKeyAll);
this.newTreeArr = $.extend(true, [], aKeyAll);
//this.newTreeArr.push()
},
//子节点&&父节点全部一串数据的函数
getCheckedKeysAll (data, keys, key) {
var res = [];
recursionAll(data, false);
return res;
// arr -> 树形总数据
// keys -> getCheckedKeys获取到的选中key值
// isChild -> 用来判断是否是子节点
function recursionAll (arr, isChild) {
var aCheck = [];
for ( var i = 0; i < arr.length; i++ ) {
var obj = arr[i];
aCheck[i] = false;
if ( obj.children ) {
aCheck[i] = recursionAll(obj.children, true) ? true : aCheck[i];
if ( aCheck[i] ) {
//res.push(obj[key]);//push的key 当前为ID
res.push(obj); //push选中节点的父节点对象数据
}
}
for ( var j = 0; j < keys.length; j++ ) {
if ( obj[key] == keys[j] ) {
aCheck[i] = true;
if ( res.indexOf(obj[key]) == -1 ) {
//res.push(obj[key]);//push的key 当前为ID
res.push(obj); //push选中的子节点对象数据
}
break;
}
}
}
if ( isChild ) {
return aCheck.indexOf(true) != -1;
}
}
},
handleNodeClick(data) {
console.log('clickdata>>>>>');
console.log(data);
},
showRMenu:function(x, y, data){
$("#rMenu").css({ "display":"block","z-index":9999});
$("#rMenu a").show();
if(y>($(window).height())/2){
//向上弹
$("#rMenu").css({"top":y-70+"px", "left":x+5+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
} else {
//向下弹
$("#rMenu").css({"top":y-5+"px", "left":x+25+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
}
$("body").bind("mousedown", onBodyMouseDown);
},
editMenu(data) {
this.currentClick = [];
if(data){
console.log('点击编辑菜单获取当前节点数据>>>>>');
console.log(data);
this.currentClick.push(data);
this.showRMenu(event.clientX, event.clientY, data);
}
},
//树搜索框
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
toNewTree(){
this.getCheckedDataAll();
console.log('新树数据>>>>>');
console.log(this.newTreeArr);
$("#dplyPackageFileTree").modal('hide');
$("#newdplyPackageFileTree").modal('show');
vm2.dataTranseNew(this.newTreeArr);
}
},
mounted: function () {
}
})
var vm2 = new Vue({
el:'#newFileTree',
data: {
dataNew: [{
name: '加载中......',
}],
defaultProps: { //el-tree默认数据格式
children: 'children',
label: 'name',
},
filterText: '', //声明搜索框中初始值为空
},
watch: { //搜索框内容监控(固定方法)
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods:{
dataTranseNew:function(val){
var that = this;
var sth2 = val;
console.log('sth2>>>>>');
console.log(sth2);
$.each(sth2,function(i,item){
if(item.children){
delete item['children'];
}
})
console.log('sth2---after>>>>>');
console.log(sth2);
sth2=getTree(sth2,0)
console.log('sth2---after---jhhhhh>>>>>');
console.log(sth2);
function getTree(data, PID) { //二次生成树 删掉children属性,再转换ID、PID
let result = []
let temp
for (let i = 0; i < data.length; i++) {
if (data[i].PID == PID) {
temp = getTree(data, data[i].ID)
if (temp.length > 0) {
data[i].children = temp
}
result.push(data[i])
}
}
return result
}
that.dataNew = sth2;
},
handleNodeClick(data) {
console.log('clickdata2>>>>>');
console.log(data);
},
//树搜索框
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
},
mounted: function () {
}
})
</script>