zTree使用
1:zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定义样式,足以满足大部分业务的开发。
第一步先导入css及js文件
css是在main.js内做了全局的引入。
第二步在页面创建ztree Div
第三步初始化ztree
<template>
<div>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</template>
<script>
//引入juqery和ztree文件
import '../../util/jquery/jquery-3.4.1.min.js'
import '../../util/ztree/jquery.ztree.core.min.js'
import '../../util/ztree/jquery.ztree.excheck.min.js'
import majorData from '../../util/ztree/Datatwo.js' //引入需要展示的数据文件
export default {
name:"ztree",
data() {
return {
techChildJobsData: [], //点击,动态加载的职务
setting:{
callback: {
onCheck: this.zTreeOnCheck, //用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
onClick: this.zTreeOnClick,
}