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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
详解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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
js密码强度检测
2016/01/07 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
SVG实现时钟效果
2018/07/17 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python实现静态服务器
2019/09/05 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
jupyter notebook 重装教程
2020/04/16 Python
pycharm导入源码的具体步骤
2020/08/04 Python
雷蛇美国官网:Razer
2020/04/03 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
2015年党员自我剖析材料
2014/12/17 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
优秀大学生自荐信
2015/03/26 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2016七夕情人节感言
2015/12/09 职场文书