Vue使用zTree插件封装树组件操作示例
2019-04-25 18:01
1456 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- jQuery插件zTree实现的基本树与节点获取操作示例
- vue组件中使用iframe元素的示例代码
- 文件上传预览插件 Bootstrap-fileinput组件封装及使用
- vue-cli3项目使用mint-ui 利用popup结合picker实现省市联动封装组件......
- vue.js如何将echarts封装为组件一键使用详解
- Vue瀑布流插件的使用示例
- 使用Vue父子组件通信实现todolist的功能示例代码
- 在vue项目中使用element-ui的Upload上传组件的示例
- vue.js使用v-pre与v-html输出HTML操作示例
- 手把手教你封装 Vue 组件并使用 NPM 发布
- Vue封装一个简单轻量的上传文件组件的示例
- zTree:JQuery树形插件使用示例
- vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
- jquery树形插件zTree使用示例
- vue插件(自定义组件或js文件使用),vue.extend(),vue.component()注册组件
- vue项目中使用ztree树形插件,ztree请求后台数据渲染Dom
- vue实现图片预览组件的封装与使用
- vue中的自定义分页插件组件的示例
- jquery树形插件zTree使用示例--入门
- bootstrap-select插件封装成Vue2.0组件