本文實例講述了Vue使用zTree插件封裝樹組件操作。分享給大家供大家參考，具體如下：
1.通過npm安裝jquery
npm install jquery --save-dev
2.在build/webpack.base.conf文件當中引入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.在項目根目錄創建一個文件夾plugins，將zTree的js文件放進去
4.將zTree的樣式文件放在static文件夾下（放在別的地方大飽之后會出現圖片路徑找不到等問題，放在static下打包時會避免ztree樣式的壓縮）。在main.js中引入該樣式：
import '../static/zTreeStyle/zTreeStyle.css'
5.創建公共組件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">新增節點</el-button>
</el-col>
<el-col :span="12">
<el-button icon="el-icon-delete" type="text" size="mini" @click="remove">刪除節點</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);
},
// 樹節點點擊事件
zTreeOnClick: function(event, treeId, treeNode) {
this.selectedNode = treeNode;
this.$emit("treeClick", treeNode);
},
// 樹節點編輯名稱回調
zTreeOnRename(event, treeId, treeNode, isCancel) {
this.$emit("addNode", treeNode);
},
// 點擊添加按鈕事件
add() {
let newCount = 1;
let zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (treeNode) {
if (treeNode.level === 2) {
this.$message("分類不能超過三級");
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]);
},
// 點擊刪除按鈕事件
remove() {
let zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (nodes.length == 0) {
this.$message("請先選擇一個節點");
return;
} else {
this.$confirm("此操作將永久刪除該節點, 是否繼續?", "提示", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.$emit("removeNode", treeNode);
})
.catch(() => {});
}
}
},
watch: {
// 監聽樹節點的變化更新樹
zNodes: function(val) {
this.init();
},
},
mounted() {
this.init();
}
};
</script>
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
