UserclassFront/src/components/my_tree.vue

<template>
    <div :id="domId" :ref="domId" class="ztree"></div>
</template>

<script>

export default {
    props: {
        treeData: {
            type: Object,
            default: () =>  ({})
        },
        setting: {
            type: Object,
            default: () => ({})
        },
        // 外部传入需要默认选中的节点id，不传则选中第一个一级节点
        selectId: {
            type: [Number, String],
            default: null
        }
    },
    data() {
        return {
            domId: "",
            treeSetting: {
                view: {
                    dblClickExpand: false,
                    showIcon: false,
                },
                check: {
                    enable: false,
                },
                callback: {},
            },
        };
    },
    watch: {
        treeData(val) {
            if (val && val.length) {
                this.$nextTick(() => {
                    this.initTree(this.treeData, this.domId);
                });
            }
        },
        // 监听外部传入选中id变化，自动重新选中
        selectId() {
            this.$nextTick(() => {
                this.handleDefaultSelect();
            })
        }
    },
    created() {
        this.$watch("treeData", (val) => {
            if (val) {
                this.$nextTick(() => {
                    this.initTree(this.treeData, this.domId);
                });
            }
        });
    },
    mounted() {
        this.domId = this.uuid();
    },
    methods: {
        getZtreeInstance() {
            return $.fn.zTree.getZTreeObj(this.domId);
        },
        uuid() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                /[xy]/g,
                function (c) {
                    var r = (Math.random() * 16) | 0,
                        v = c == "x" ? r : (r & 0x3) | 0x8;
                    return v.toString(16);
                }
            );
        },
        /**
         * 核心方法：根据节点id选中节点，并逐层展开所有父节点
         * @param {String|Number} targetId 目标节点id
         */
        selectNodeById(targetId) {
            const treeObj = $.fn.zTree.getZTreeObj(this.domId);
            if (!treeObj || !targetId) return;

            const targetNode = treeObj.getNodeByParam('id', targetId);
            if (!targetNode) return;

            // 高亮选中节点
            treeObj.selectNode(targetNode);

            // 循环向上展开所有父节点
            let currNode = targetNode;
            while (currNode) {
                treeObj.expandNode(currNode, true, false, false);
                currNode = currNode.getParentNode();
            }
        },
        /**
         * 默认选中逻辑：有selectId选对应节点，无则选第一个一级节点
         */
        handleDefaultSelect() {
            const treeObj = $.fn.zTree.getZTreeObj(this.domId);
            if (!treeObj) return;

            const rootNodes = treeObj.getNodes();
            if (!rootNodes || rootNodes.length === 0) return;

            if (this.selectId !== null && this.selectId !== undefined) {
                // 外部传入id，选中指定节点
                this.selectNodeById(this.selectId);
            } else {
                // 无传入id，默认选中第一个一级节点
                const firstRoot = rootNodes[0];
                treeObj.selectNode(firstRoot);
                treeObj.expandNode(firstRoot, true, false, false);
            }
        },
        initTree(_data, _domId) {
            const _this = this;
            // 合并自定义setting
            _this.treeSetting = Object.assign({}, _this.treeSetting, _this.setting);

            // 绑定点击回调
            _this.treeSetting.callback.onClick = (event, treeId, treeNode) => {
                _this.$emit("on-tree-click", treeNode);
            };
            // 绑定复选框点击回调
            _this.treeSetting.callback.onCheck = (event, treeId, treeNode) => {
                const zTreeObj = $.fn.zTree.getZTreeObj(treeId);
                // getCheckedNodes(true) 获取所有手动勾选节点，不分层级
                const allChecked = zTreeObj.getCheckedNodes(true);
                this.$emit('on-tree-Check', allChecked);
            };
            // 展开所有一级节点
            var zNodes = _this.openFistNode(_data);
            // 初始化树
            $.fn.zTree.init($("#" + _domId), _this.treeSetting, zNodes);
            // 执行默认选中逻辑
            this.$nextTick(() => {
                this.handleDefaultSelect();
            })
        },
        openFistNode(_zNodes) {
            if (_zNodes && _zNodes.length > 0) {
                for (var i = 0; i < _zNodes.length; i++) {
                    _zNodes[i].open = true;
                }
            }
            return _zNodes;
        }
    },
};
</script>

<style>
</style>