Vue開發——使用JQ的zTree外掛封裝樹元件
版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/guanguan0_0/article/details/80359601 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>