vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單
本文實(shí)例為大家分享了vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單展示的具體代碼,供大家參考,具體內(nèi)容如下

代碼:
<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:"當(dāng)前項(xiàng)目"},
{ id:12,pid:1,name:"工程管理",open:true,
children: [
{ id:121,pid:12,name:"我的工程"},
{ id:122,pid:12,name:"施工調(diào)度"},
{ 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:"機(jī)構(gòu)列表"}
]
},
{ id:14,pid:1,name:"審核管理",open:true,
children: [
{ id:141,pid:14,name:"用工審核"},
{ id:142,pid:14,name:"商家審核"},
{ id:145,pid:14,name:"機(jī)構(gòu)審核"}
]
},
{ id:15,pid:1,name:"公司管理",open:true,
children: [
{ id:1517,pid:15,name:"我的工程案例"},
{ id:1518,pid:15,name:"聯(lián)系人設(shè)置"},
{ id:1519,pid:15,name:"廣告設(shè)置"}
]
},
{ id:16,pid:1,name:"業(yè)務(wù)管理",open:true,
children: [
{ id:164,pid:16,name:"合同范本"},
{ id:165,pid:16,name:"合同列表"},
{ id:166,pid:16,name:"需求調(diào)度"}
]
},
{ id:17,pid:1,name:"訂單管理",open:true,
children: [
{ id:171,pid:17,name:"商品訂單"},
{ id:172,pid:17,name:"用工訂單"},
{ id:175,pid:17,name:"供應(yīng)菜單"}
]
},
{ id:18,pid:1,name:"我的功能",open:true,
children: [
{ id:181,pid:18,name:"免費(fèi)設(shè)計"},
{ id:182,pid:18,name:"裝修報價"},
{ id:1817,pid:18,name:"項(xiàng)目用工"}
]
},
{ id:19,pid:1,name:"分潤管理",open:true,
children: [
{ id:191,pid:19,name:"分潤列表"}
]
},
{ id:110,pid:1,name:"運(yùn)營管理",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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于console.log打印結(jié)果是?[object?Object]的解決
這篇文章主要介紹了關(guān)于console.log打印結(jié)果是?[object?Object]的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue 自定義指令directives及其常用鉤子函數(shù)說明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01
淺談Vue.js中ref ($refs)用法舉例總結(jié)
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
如何在Vue3中正確使用ElementPlus,親測有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑!具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue怎樣獲取當(dāng)前時間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時間,并且傳遞給后端(不用注解)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
axios請求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項(xiàng)目中,做一個非常簡單的新增用戶場景,但是使用原生axios發(fā)送post請求的時候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
Ant Design moment對象和字符串之間的相互轉(zhuǎn)化教程
這篇文章主要介紹了Ant Design moment對象和字符串之間的相互轉(zhuǎn)化教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue-CLI 項(xiàng)目在pycharm中配置方法
這篇文章主要介紹了Vue-CLI 項(xiàng)目在pycharm中配置方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下2022-10-10

