1. 程式人生 > >vue with zTree——帶複選框的樹

vue with zTree——帶複選框的樹

這裡寫圖片描述

<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>