Vue使用z-tree处理大数量的数据以及生成树状结构

{
	label: '汽车',
	value: 'car',
	children: [
		{
			label: '大众',
			value: 'das'
		},
		{
			label: '丰田',
			value: 'Toyota'
		}
	]
}

<div class="ztree-wrap">
   <ul id="treeZyType" ref="ztree" class="ztree"></ul>
 </div>

import "@/components/Ztree/js/jquery-1.4.4.min.js"
import "@/components/Ztree/js/jquery.ztree.core.js"
import "@/components/Ztree/js/jquery.ztree.excheck.js"

// source是从后台获取的数据，层级结构已经处理好。
jsonToTree(source) {
   var setting = {
     check: {
       enable: true,
       chkboxType: { "Y": "", "N": "s" }
     },
     data: {
       key: {
           name: "name"
       },
       simpleData: {
         enable: false,
         idKey: "id",
         pIdKey: "parentId",
         rootPId: null
       }
     },
     view: {
       fontCss: {size: "20px"}
     }
   };
   $.fn.zTree.init($("#treeZyType"), setting, source);
 }

<style lang="scss" scoped>
@import url("../../components/Ztree/css/zTreeStyle/zTreeStyle.css");
</style>

makeNodeIcoStyle: function (setting, node) {
   var icoStyle = [];
   if (!node.isAjaxing) {
     var isParent = data.nodeIsParent(setting, node);
     var icon = (isParent && node.iconOpen && node.iconClose) ? (node.open ? node.iconOpen : node.iconClose) : node[setting.data.key.icon];
     if (icon) {
       icoStyle.push("background:url(", icon, ") 0 0 no-repeat;");
     } else {
     	// 判断数据属性，根据属性使用特定图标
       if (node.lockStatus === 1) {
         icoStyle.push("background:url(", "/img/lock.png", ") 0 0 no-repeat;");
       } else if (node.lockStatus === 0 || node.lockStatus === 3){
         icoStyle.push("background:url(", "/img/unlock.png", ") 0 0 no-repeat;");
       }
     }
     if (setting.view.showIcon == false || !tools.apply(setting.view.showIcon, [setting.treeId, node], true)) {
       icoStyle.push("width:0px;height:0px;");
     }
   }
   return icoStyle.join('');
 },

// 获取到z-tree对象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// state为折叠展开状态，true为展开，false为折叠。
zTree.expandAll(state);

// 获取到z-tree对象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// state为选中状态，true为全选，false为取消全选。
zTree.checkAllNodes(state);

// 获取到z-tree对象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// 获取选中的节点
const zyTypeNode = zTree.getCheckedNodes(true);