Vue使用zTree插件封装树组件操作示例


Posted in Javascript onApril 25, 2019

本文实例讲述了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文件放进去

Vue使用zTree插件封装树组件操作示例

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程序设计有所帮助。

Javascript 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
详解javascript中的Error对象
Apr 25 #Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 #Javascript
vue2.0自定义指令示例代码详解
Apr 25 #Javascript
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
You might like
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
node.js操作mongodb简单示例分享
2017/05/25 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
Python实现图片滑动式验证识别方法
2017/11/09 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
中学生检讨书1000字
2014/10/28 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
社区党务工作总结2015
2015/05/19 职场文书
花木兰观后感
2015/06/10 职场文书
体育委员竞选稿
2015/11/21 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python