Ztree官网下载全量的插件包,然后解压。
封装成vueZtree,代码如下:
<!—- ztree封装的vue树,依赖ztree3.5版本的css和js,setting配置项等配置可查看ztree官网的api文档。要正常使用,则项目需要引入jQuery-->
<style>
@import "./ztree/metroStyle/metroStyle.css";
.boxDiv{
display:block;
padding: 0px 5px;
text-align: center;
}
.searchInput {
width: 95%;
border: 1px solid #dddddd;
border-radius: 3px;
line-height: 18px;
padding: 1px 5px;
display: none;
}
.searchInput::-webkit-input-placeholder{
color:#cccccc
}
</style>
<template>
<div class="boxDiv">
<input class="searchInput" placeholder="请输入关键字" :id="objId+'search'" :style="inputStyle"/>
<ul :id="objId" class="ztree"></ul>
</div>
</template>
<script>
import "./ztree/jquery.ztree.all.min.js"; //ztree
import "./ztree/jquery.ztree.exhide.min.js"; //ztree
import "./ztree/ztree.extendfunc.js"; //模糊搜索的方法,仅支持非异步加载时候的模糊搜索
import commonTool from "./commonTool.js";
/***
* ================================函数说明=====================================
* 此组件只是对ztree3.5版本的js进行了vue接口的封装,支持所有ztree3.5提供的方法,
* 调用getTreeObj()函数获得ztree的对象后即可使用方法。
* 如:addNodes方法在此组件中未封装,但可以通过getTreeObj().addNodes()来调用
*
* 也可以根据ztree3.5的官方API文档在此组件的基础上再进行右键点击事件等方法的封装
* ============================================================================
*
* ================================参数说明=====================================
* zdatas:树的节点数据,形如:
* [
{
id: "1",
name: "test1",
children: [
{
id: "3",
name: "test3",
children: [
{ id: "31", name: "test31", checked: true, chkDisabled: true }
]
},
{ id: "4", name: "test4" },
{ id: "5", name: "test5" }
]
},
{ id: "2", name: "test2" }
];
*
* viewStyle:树的view样式,可参照ztree的官方文档API中setting-view部分
* viewStyle例如:{
//树的节点文本样式
fontCss:{
color:"#ff0011",
background:"blue"