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

本文实例讲述了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程序设计有所帮助。