87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<template>
|
|
<div :id="domId" :ref="domId" class="ztree"></div>
|
|
</template>
|
|
|
|
<script>
|
|
require("@public/libs/ztree/zTreeStyle.css");
|
|
import "@public/libs/ztree/jquery.ztree.all.min.js";
|
|
export default {
|
|
props: {
|
|
treeData: {
|
|
type: Object,
|
|
},
|
|
setting: {
|
|
type: Object,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
domId: "",
|
|
treeSetting: {
|
|
view: {
|
|
dblClickExpand: false,
|
|
showIcon: false,
|
|
},
|
|
check: {
|
|
enable: false,
|
|
},
|
|
callback: {},
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.$watch("treeData", val => {
|
|
if (val) {
|
|
this.$nextTick(() => {
|
|
this.initTree(this.treeData, this.domId);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
mounted() {
|
|
this.domId = this.uuid();
|
|
},
|
|
methods: {
|
|
uuid() {
|
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
|
var r = (Math.random() * 16) | 0,
|
|
v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
return v.toString(16);
|
|
});
|
|
},
|
|
initTree(_data, _domId) {
|
|
const _this = this;
|
|
_this.treeSetting.callback.onClick = (event, treeId, treeNode, clickFlag) => {
|
|
// console.log(event, treeId, treeNode, clickFlag);
|
|
_this.$emit("on-tree-click", treeNode);
|
|
};
|
|
var zNodes = _this.openFistNode(_data);
|
|
$.fn.zTree.init($("#" + _domId), _this.treeSetting, zNodes);
|
|
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
|
var nodes = treeObj.getNodes();
|
|
if (nodes && nodes.length > 0) {
|
|
setTimeout(function () {
|
|
$("#" + nodes[0].tId + "_a").click();
|
|
}, 0);
|
|
}
|
|
},
|
|
openFistNode(_zNodes) {
|
|
//展开一级节点
|
|
if (_zNodes && _zNodes.length > 0) {
|
|
for (var key in _zNodes) {
|
|
if (_zNodes.hasOwnProperty(key)) {
|
|
var element = _zNodes[key];
|
|
element.open = true;
|
|
}
|
|
}
|
|
} else {
|
|
_zNodes.open = true;
|
|
}
|
|
return _zNodes;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |