vue2.x + zTree，简单的二次封装

想要源码，请联系。

部分功能使用了element-ui

1，引入zTree

npm install @ztree/ztree_v3

2，引入jQuery

npm install jquery -S

1，首先配置vue.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jquery: "jquery",
                "window.jQuery": "jquery",
                jQuery: "jquery",
            }),
        ],
    },
};

2，在需要使用的页面引入

import $ from "jquery";
import "@ztree/ztree_v3/js/jquery.ztree.core.min.js";
import "@ztree/ztree_v3/js/jquery.ztree.excheck.min.js";
import "@ztree/ztree_v3/js/jquery.ztree.exedit.min.js";
import "@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css";
import "@ztree/ztree_v3/css/metroStyle/metroStyle.css";

3，实现的功能。

1. 配置zTree 的节点数据 data，属性zTreeNodes。
2. 配置zTree的setting属性，拆分优化，分为3个优先级
3. 增加默认展开的节点的 key 的数组， 属性checkNodeKeys
4. 增加默认展开的节点的 key 的数组， 属性expandNodeKeys
5. 增加每个树节点用来作为唯一标识的属性， 属性zTreeNodeKey
6. 整理获取节点的事件，以及返回值

目录层级

1，setting.js

export default function (Vue) {
    return {
        check: {
            enable: false,
            chkboxType: {
                "Y": "ps",
                "N": "ps",
            },
        },
        data: {
            keep: {
                leaf: false,
                parent: false,
            },
            key: {
                checked: "checked",
                children: "children",
                isParent: "isParent",
                isHidden: "isHidden",
                title: "",
                url: "url",
            },
            simpleData: {
                enable: false,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: 1,
            },
            render: {
                name: null,
                title: null,
            },
        },
        edit: {
            enable: false,
            drag: {
                autoExpandTrigger: true,
                isCopy: true,
                isMove: true,
                prev: true,
                next: true,
                inner: true,
                borderMax: 10,
                borderMin: -5,
                minMoveSize: 5,
                maxShowNodeNum: 5,
                autoOpenTime: 500,
            },
            editNameSelectAll: false,
            removeTitle: "remove",
            renameTitle: "rename",
            showRemoveBtn: true,
            showRenameBtn: true,
        },
        view: {
            addDiyDom: null,
            addHoverDom: null,
            autoCancelSelected: true,
            dblClickExpand: true,
            expandSpeed: "fast",
            fontCss: {},
            nodeClasses: {},
            nameIsHTML: false,
            removeHoverDom: null,
            selectedMulti: true,
            showIcon: true,
            showLine: true,
            showTitle: true,
            txtSelectedEnable: false,
        },
        callback: {
            // before 事件
            // ----↓↓↓↓↓↓↓↓↓↓----
            // 用于捕获异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载
            // 默认值：null
            beforeAsync: function (treeId, treeNode) {
                const original = { treeId, treeNode };
                const zTreeObject = this.getZTreeObj(treeId);
                const target = { zTreeObject };
                Vue.$emit("beforeAsync", original, target);
            },

            // on 事件
            // ----↓↓↓↓↓↓↓↓↓↓----
            // 用于捕获异步加载出现异常错误的事件回调函数
            // 如果设置了 setting.callback.beforeAsync 方法，且返回 false，将无法触发 onAsyncSuccess / onAsyncError 事件回调函数。
            // 默认值：null
            onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                // event   js event 对象 标准的 js event 对象
                // treeId   String  对应 zTree 的 treeId，便于用户操控
                // treeNode JSON   进行异步加载的父节点 JSON 数据对象 针对根进行异步加载时，treeNode = null
                // XMLHttpRequest   String  标准 XMLHttpRequest 对象，请参考 JQuery API 文档。
                // textStatus   String  请求状态：success，error，请参考 JQuery API 文档。
                // errorThrown  String  errorThrown 只有当异常发生时才会被传递，请参考 JQuery API 文档。
                const original = { event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown };
                const zTreeObject = this.getZTreeObj(treeId);
                const target = { zTreeObject };
                Vue.$emit("onAsyncError", original, target);
            },

            // 用于捕获异步加载正常结束的事件回调函数
            // 如果设置了 setting.callback.beforeAsync 方法，且返回 false，将无法触发 onAsyncSuccess / onAsyncError 事件回调函数。
            // 默认值：null
            onAsyncSuccess: function (event, treeId, treeNode, msg) {
                // event   js event 对象 标准的 js event 对象
                // treeId   String  对应 zTree 的 treeId，便于用户操控
                // treeNode JSON   进行异步加载的父节点 JSON 数据对象 针对根进行异步加载时，treeNode = null
                // msg  String / Object 异步获取的节点数据字符串，主要便于用户调试使用。实际数据类型会受 setting.async.dataType 的设置影响，请参考 JQuery API 文档。
                const original = { event, treeId, treeNode, msg };
                const zTreeObject = this.getZTreeObj(treeId);
                const target = { zTreeObject };
                Vue.$emit("onAsyncSuccess", original, target);
            },

            // 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
            // 如果设置了 setting.callback.beforeCheck 方法，且返回 false，将无法触发 onCheck 事件回调函数。
            // 默认值：null
            onCheck: function (event, treeId, treeNode) {
                // event   js event 对象 标准的 js event 对象
                // treeId   String  对应 zTree 的 treeId，便于用户操控
                // treeNode JSON    被勾选 或 取消勾选的节点 JSON 数据对象
                const zTreeObject = this.getZTreeObj(treeId);
                const { checkNodes, checkKeys } = createZTreeCheckNodes(treeId, Vue.zTreeNodeKey);
                const original = { event, treeId, treeNode };
                const target = { zTreeObject, checkNodes, checkKeys };
                Vue.$emit("onCheck", original, target);
            },

            // 用于捕获节点被点击的事件回调函数
            // 如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。
            // 默认值：null
            onClick: function (event, treeId, treeNode, clickFlag) {
                // event   js event 对象 标准的 js event 对象
                // treeId   String  对应 zTree 的 treeId，便于用户操控
                // treeNode JSON    被点击的节点 JSON 数据对象
                // clickFlag   Number  节点被点击后的选中操作类型，详细文档 https://treejs.cn/v3/api.php
                const original = { event, treeId, treeNode, clickFlag };
                const zTreeObject = this.getZTreeObj(treeId);
                const target = { zTreeObject };
                Vue.$emit("onClick", original, target);
            },

            // 用于捕获 zTree 上鼠标双击之后的事件回调函数
            // 如果设置了 setting.callback.beforeDblClick 方法，且返回 false，将无法触发 onDblClick 事件回调函数。
            // 默认值：null
            onDblClick: function (event, treeId, treeNode) {
                // event   js event 对象 标准的 js event 对象
                // treeId   String  对应 zTree 的 treeId，便于用户操控
                // treeNode JSON    鼠标双击时所在节点的 JSON 数据对象 如果不在节点上，则返回 null
                const zTreeObject = this.getZTreeObj(treeId);
                const original = { event, treeId, treeNode };
                const target = { zTreeObject };
                Vue.$emit("onDblClick", original, target);
            },
        },
    };
};

// 获取zTree已选择的树节点 开启复选框和单选框 setting.check.enable = true
export function createZTreeCheckNodes(treeId, zTreeNodeKey = null) {
    try {
        const zTreeObject = $.fn.zTree.getZTreeObj(treeId);
        const nodeKey = createZTreeNodeKey(zTreeObject, zTreeNodeKey);
        const checkNodes = zTreeObject.getChangeCheckedNodes();
        const checkKeys = checkNodes.map(v => v[nodeKey]);
        return { checkNodes, checkKeys };
    } catch (e) {
        console.error("获取zTree已选择的树节点 开启复选框和单选框", e);
    }
}

// 获取zTree已选择的树节点 未开启复选框和单选框 setting.check.enable = false
export function createZTreeSelectNodes(treeId, zTreeNodeKey = null) {
    try {
        const zTreeObject = $.fn.zTree.getZTreeObj(treeId);
        const nodeKey = createZTreeNodeKey(zTreeObject, zTreeNodeKey);
        const selectNodes = zTreeObject.getSelectedNodes();
        const selectKeys = selectNodes.map(v => v[nodeKey]);
        return { selectNodes, selectKeys };
    } catch (e) {
        console.error(" 获取zTree已选择的树节点 未开启复选框和单选框", e);
    }
}

// 获取zTree的node-key
// simpleData.enable = true,是simpleData.idKey；
// simpleData.enable = false: 是自定义属性zTreeNodeKey；
export function createZTreeNodeKey(zTreeObject, zTreeNodeKey) {
    const zTreeSetting = zTreeObject.setting;
    const { enable, idKey } = zTreeSetting.data.simpleData;
    return enable ? idKey : zTreeNodeKey;
}

2，props.js

export default {
    // zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。
    treeId: {
        type: String,
        default: "tree",
    },
    // zTree 对象使用的 setting 配置数据
    setting: {
        type: [Object, null],
        default: null,
    },
    // zTree 的节点数据 data
    zTreeNodes: {
        type: Array,
        default: () => [],
    },
    // zTree 的节点已选择的keys，需要设置node-key
    // simpleData.enable = true,设置simpleData.idKey；
    // simpleData.enable = false: 设置自定义属性zTreeNodeKey；
    checkNodeKeys: {
        type: Array,
        default: () => [],
    },
    // zTree 的节点已展开的keys  需要设置node-key
    // simpleData.enable = true,设置simpleData.idKey；
    // simpleData.enable = false: 设置自定义属性zTreeNodeKey；
    expandNodeKeys: {
        type: Array,
        default: () => [],
    },

    // 以下均为 setting 拆分 ,
    // 优先级： 父级传输setting对象最高 --> 其次拆分setting --> 插件默认setting最低
    // ----↓↓↓↓↓↓↓↓↓↓----
    // 如果不是简单数据（simpleData）格式，可以设置一个node-key，用于获取checkKeys集合；（自定义属性）
    zTreeNodeKey: {
        type: [String, null],
        default: "id",
    },
    // zTree 复选框，单选框配置
    // setting.check
    zTreeCheck: {
        type: [Object, null],
        default: null,
    },
    // zTree 节点属性锁配置
    // setting.data.keep
    zTreeKeep: {
        type: [Object, null],
        default: null,
    },
    // zTree 节点数据配置选项
    // setting.data.key
    zTreeKey: {
        type: [Object, null],
        default: null,
    },
    // 确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
    // 不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
    // setting.data.simpleData
    zTreeSimpleData: {
        type: [Object, null],
        default: null,
    },
    // 用于使用自定义的方法动态渲染节点名称/节点标题
    // setting.data.render
    zTreeRender: {
        type: [Object, null],
        default: null,
    },
    // zTree 操作配置
    // setting.edit
    zTreeEdit: {
        type: [Object, null],
        default: null,
    },
    // zTree 视图层配置
    // setting.view
    zTreeView: {
        type: [Object, null],
        default: null,
    },
};

3，index.vue

先引入index.vue