vue实现带复选框的树形菜单

<template>  <div id="checkTree">    <div class="tree-box">      <div class="zTreeDemoBackground left">        <ul id="treeDemo" class="ztree"></ul>      </div>    </div>  </div></template><script>  export default {   name: 'checkTree',   components:{   },   data:function(){    return{      setting:{        check: {           enable: true,           nocheckInherit: false         },         data: {           simpleData: {             enable: true           }         }       },      zNodes:[      { id:1,pid:0,name:"大良造菜单",open:true,nocheck:false,        children: [          { id:11,pid:1,name:"当前项目"},          { id:12,pid:1,name:"工程管理",open:true,            children: [              { id:121,pid:12,name:"我的工程"},              { id:122,pid:12,name:"施工调度"},              { id:1211,pid:12,name:"材料竞价"}            ]          },          { id:13,pid:1,name:"录入管理",open:true,            children: [              { id:131,pid:13,name:"用工录入"},              { id:132,pid:13,name:"商家录入"},              { id:1314,pid:13,name:"机构列表"}            ]          },          { id:14,pid:1,name:"审核管理",open:true,            children: [              { id:141,pid:14,name:"用工审核"},              { id:142,pid:14,name:"商家审核"},              { id:145,pid:14,name:"机构审核"}            ]          },          { id:15,pid:1,name:"公司管理",open:true,            children: [              { id:1517,pid:15,name:"我的工程案例"},              { id:1518,pid:15,name:"联系人设置"},              { id:1519,pid:15,name:"广告设置"}            ]          },          { id:16,pid:1,name:"业务管理",open:true,            children: [              { id:164,pid:16,name:"合同范本"},              { id:165,pid:16,name:"合同列表"},              { id:166,pid:16,name:"需求调度"}            ]          },          { id:17,pid:1,name:"订单管理",open:true,            children: [              { id:171,pid:17,name:"商品订单"},              { id:172,pid:17,name:"用工订单"},              { id:175,pid:17,name:"供应菜单"}            ]          },          { id:18,pid:1,name:"我的功能",open:true,            children: [              { id:181,pid:18,name:"免费设计"},              { id:182,pid:18,name:"装修报价"},              { id:1817,pid:18,name:"项目用工"}            ]          },          { id:19,pid:1,name:"分润管理",open:true,            children: [              { id:191,pid:19,name:"分润列表"}            ]          },          { id:110,pid:1,name:"运营管理",open:true,            children: [              { id:1101,pid:110,name:"代理列表"},              { id:1102,pid:110,name:"代售商品"}            ]          },        ]      }      ]    }  },   methods:{   },   mounted(){    $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);   }  }</script><style>  @import '../../../plugins/ztree/zTreeStyle.css';</style>