Vue使用zTree插件封裝樹(shù)組件操作示例
本文實(shí)例講述了Vue使用zTree插件封裝樹(shù)組件操作。分享給大家供大家參考,具體如下:
1.通過(guò)npm安裝jquery
npm install jquery --save-dev
2.在build/webpack.base.conf文件當(dāng)中引入jquery
module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery') } }, ... }
3.在項(xiàng)目根目錄創(chuàng)建一個(gè)文件夾plugins,將zTree的js文件放進(jìn)去
4.將zTree的樣式文件放在static文件夾下(放在別的地方大飽之后會(huì)出現(xiàn)圖片路徑找不到等問(wèn)題,放在static下打包時(shí)會(huì)避免ztree樣式的壓縮)。在main.js中引入該樣式:
import '../static/zTreeStyle/zTreeStyle.css'
5.創(chuàng)建公共組件ztree>index.vue,下面為我的公共組件
html:
<template> <div class="ztree"> <el-row> <el-col :span="12"> <el-button icon="el-icon-plus" size="mini" type="text" @click="add">新增節(jié)點(diǎn)</el-button> </el-col> <el-col :span="12"> <el-button icon="el-icon-delete" type="text" size="mini" @click="remove">刪除節(jié)點(diǎn)</el-button> </el-col> </el-row> <ul id="treeDemo" class="ztree"></ul> </div> </template>
js:
<script> import '../../../plugins/zTree/jquery-1.4.4.min' import '../../../plugins/zTree/jquery.ztree.core' import '../../../plugins/zTree/jquery.ztree.excheck' import '../../../plugins/zTree/jquery.ztree.exedit' export default { props: { zNodes: { type: Array }, selectedNodeId: "" }, data() { return { selectedNode: {}, setting: { view: { showIcon: false }, edit: { enable: true, showRemoveBtn: false, showRenameBtn: false }, data: { keep: { parent: true, leaf: true }, simpleData: { enable: true } }, callback: { onClick: this.zTreeOnClick, onRename: this.zTreeOnRename } } }; }, methods: { // 初始化ztree init() { $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); }, // 樹(shù)節(jié)點(diǎn)點(diǎn)擊事件 zTreeOnClick: function(event, treeId, treeNode) { this.selectedNode = treeNode; this.$emit("treeClick", treeNode); }, // 樹(shù)節(jié)點(diǎn)編輯名稱(chēng)回調(diào) zTreeOnRename(event, treeId, treeNode, isCancel) { this.$emit("addNode", treeNode); }, // 點(diǎn)擊添加按鈕事件 add() { let newCount = 1; let zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (treeNode) { if (treeNode.level === 2) { this.$message("分類(lèi)不能超過(guò)三級(jí)"); return; } else { treeNode = zTree.addNodes(treeNode, { id: 100 + newCount, isParent: true, pId: treeNode.id, name: "new node" + newCount++ }); } } else { treeNode = zTree.addNodes(null, { id: 100 + newCount, isParent: true, pId: 0, name: "new node" + newCount++ }); } zTree.editName(treeNode[0]); }, // 點(diǎn)擊刪除按鈕事件 remove() { let zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (nodes.length == 0) { this.$message("請(qǐng)先選擇一個(gè)節(jié)點(diǎn)"); return; } else { this.$confirm("此操作將永久刪除該節(jié)點(diǎn), 是否繼續(xù)?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$emit("removeNode", treeNode); }) .catch(() => {}); } } }, watch: { // 監(jiān)聽(tīng)樹(shù)節(jié)點(diǎn)的變化更新樹(shù) zNodes: function(val) { this.init(); }, }, mounted() { this.init(); } }; </script>
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題
今天小編就為大家分享一篇解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue 中 a標(biāo)簽上href無(wú)法跳轉(zhuǎn)的解決方式
今天小編大家分享一篇Vue 中 a標(biāo)簽上href無(wú)法跳轉(zhuǎn)的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue中關(guān)于router.beforeEach()的用法
這篇文章主要介紹了vue中關(guān)于router.beforeEach()的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件,這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫(huà)的炫酷動(dòng)畫(huà)效果形式,根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度,適合搶購(gòu)、拍賣(mài)、下注等業(yè)務(wù)場(chǎng)景,且對(duì)移動(dòng)端友好,需要的朋友可以參考下2018-11-11unplugin-vue-components解決命名沖突問(wèn)題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03