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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
查询优化的一般准则有哪些
2015/03/08 面试题
params有什么用
2016/03/01 面试题
文员自我评价怎么写
2013/09/19 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Python中itertools库的四个函数介绍
2022/04/06 Python