vue ---ztree 修改ztree的图标

由于数据量大简单的iview的tree或是el的tree加载数据造成页面卡顿，前端操作不流畅。

基于vue-giant-ztree修改，添加类似图标⬇️

获取icon代码方法 --------借鉴大佬的经验拿到了自己项目所需的图标

在ztree引用只需如下几个文件

 ztree对应的vue文件

<template>
    <div id="z-tree" class="flex-col">
        <div class="wrap flex-1">
            <div class="c">
                <tree
                    :setting="setting"
                    :nodes="nodes"
                    @onClick="onClick"
                    @onCreated="handleCreated"
                    @updateData="updateData"
                    @onExpand="onExpand"
                />
            </div>
        </div>
    </div>
</template>

<script>
import "../Ztree/style/iconfont.css";
import {mapGetters, mapMutations} from "vuex";
import CONSTANT from "../../../config/constant";

export default {
    name: "app",
    components: {
        tree: ()=> import("../Ztree/ztree.vue")
    },
    props: {
        cardWidth: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            selectTreeNodeId: null,
            ztreeObj: null,
            setting: {
                edit: {
                    enable: true,
                    //是否显示默认的删除按钮
                    showRemoveBtn: false,
                    showRenameBtn: false,
                    drag: false
                },
                //设置前面显示的图标
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                    },
                    // 设置图标库(采用iconfont class形式)
                    iconMap: {
                        true: "icon-wenjian",
                        false: "icon-js",
                    },
                    // 设置对应每个节点的节点类型，与数据中customType对应(25行)
                    key: {
                        nodeType: "isFolder",
                        name: "title",
                    },
                },
                view: {
                    // 开启图标显示功能
                    showIcon: true,
                    addHoverDom: this.addHoverDom,
                    removeHoverDom: this.removeHoverDom,
                    addDiyDom: this.addDiyDom,
                    dblClickExpand: false,
                },
            },
        };
    },
    computed: {
        nodes() {
            return this.getCodeTreeData();
        }
    },
    watch: {
        cardWidth: {
            handler(newVal, oldVal) {
                if (this.ztreeObj) {
                    let nodes = this.ztreeObj.getNodes();
                    for (let i=0; i<nodes.length; i++) {
                        this.asyncNodeDom(nodes[i].children, nodes[i].open);
                    }
                }
            }
        }
    },
    methods: {
        ...mapGetters(["getCodeTreeData", "getNewTreeNode"]),
        ...mapMutations(["setNewTreeNode"]),
        //设置节点后面对节点进行操作的图标
        addHoverDom(treeId, treeNode) {
            const item = document.getElementById(`${treeNode.tId}_a`);
            if (
                item
                && !item.querySelector(".tree_extra_historyBtn")
                && treeNode.level !== 0
                && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
            ) {
                const history = document.createElement("img");
                history.id = `${treeId}_${treeNode.id}_historyBtn`;
                history.classList.add("tree_extra_historyBtn");
                history.src = require("../Ztree/style/img/History.svg");
                history.style.width = "20px";
                history.style.height = "20px";
                history.style.marginLeft = "5px";
                history.style.marginBottom = "12px";
                history.title = "版本";
                history.addEventListener("click", (e) => {
                    e.stopPropagation();
                    this.selectTreeNodeId = treeNode.tId;
                    this.$emit("onClick", treeNode,"edition");
                });
                item.appendChild(history);
            }
            if (
                item
                && !item.querySelector(".tree_extra_btn_add")
                && !treeNode.isFolder
                && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
            ) {
                const shareBtn = document.createElement("img");
                shareBtn.id = `${treeId}_${treeNode.id}_btn_add`;
                shareBtn.classList.add("tree_extra_btn_add");
                shareBtn.src = require("../Ztree/style/img/share-1-copy.svg");
                shareBtn.style.width = "14px";
                shareBtn.style.height = "15px";
                shareBtn.style.marginLeft = "5px";
                shareBtn.style.marginBottom = "12px";
                shareBtn.title = "分享";
                shareBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    this.selectTreeNodeId = treeNode.tId;
                    this.$emit("onShare", treeNode);
                });
                item.appendChild(shareBtn);
            }

            if (
                item
                && !item.querySelector(".tree_extra_btn")
                && treeNode.level !== 0
                && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
            ) {
                const updateBtn = document.createElement("img");
                updateBtn.id = `${treeId}_${treeNode.id}_btn`;
                updateBtn.classList.add("tree_extra_btn");
                updateBtn.src = require("../Ztree/style/img/set.svg");
                updateBtn.style.width = "22px";
                updateBtn.style.height = "22px";
                updateBtn.style.marginLeft = "5px";
                updateBtn.style.marginBottom = "12px";
                updateBtn.title = "更新";
                updateBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    this.selectTreeNodeId = treeNode.tId;
                    this.$emit("onUpdate", treeId, treeNode)
                });
                item.appendChild(updateBtn);
            }
            if (
                item
                && !item.querySelector(".tree_extra_deleteBtn")
                && treeNode.level !== 0
                && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
            ) {
                const deleteBtn = document.createElement("img");
                deleteBtn.id = `${treeId}_${treeNode.id}_deleteBtn`;
                deleteBtn.classList.add("tree_extra_deleteBtn");
                deleteBtn.src = require("../Ztree/style/img/shanchu.svg");
                deleteBtn.style.width = "15px";
                deleteBtn.style.height = "15px";
                deleteBtn.style.marginLeft = "5px";
                deleteBtn.style.marginBottom = "12px";
                deleteBtn.title = "删除";
                deleteBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    this.selectTreeNodeId = treeNode.tId;
                    this.$emit("onRemove", treeNode);
                });
                item.appendChild(deleteBtn);
            }
            let base_id = treeId.split("_").slice(0, 2).join("_");
            let baseObj = document.getElementById(base_id);
            let width = baseObj.clientWidth;
            let textNode = document.getElementById(treeNode.tId+"_span");
            if (textNode) {
                let maxWidth = width - treeNode.level*22 - 135;
                if (treeNode.isFolder) {
                    maxWidth = width - treeNode.level*22 - 115;
                }
                if (treeNode.auth !== CONSTANT.FILE_AUTH.WRITE) {
                    maxWidth = width - treeNode.level*22 - 70;
                }
                textNode.style.width = `${maxWidth}px`;
                let iconNode = document.getElementById(treeNode.tId+"_ico");
                if (iconNode) {
                    iconNode.style.marginBottom = "12px";
                }
            }
            let aNode = document.getElementById(treeNode.tId+"_a");
            if (aNode) {
                aNode.style.backgroundColor = "#f0f0f0";
            }
        },
        //移除节点后面的操作图标
        removeHoverDom(treeId, treeNode) {
            const item = document.getElementById(`${treeNode.tId}_a`);
            if (item) {
                const updateBtn = item.querySelector(".tree_extra_btn");
                const shareBtn = item.querySelector(".tree_extra_btn_add");
                const deleteBtn = item.querySelector(".tree_extra_deleteBtn");
                const historyBtn = item.querySelector('.tree_extra_historyBtn');
                if (updateBtn) {
                    item.removeChild(updateBtn);
                }
                if (shareBtn) {
                    item.removeChild(shareBtn);
                }
                if (deleteBtn) {
                    item.removeChild(deleteBtn);
                }
                if (historyBtn) {
                    item.removeChild(historyBtn);
                }
                let base_id = treeId.split("_").slice(0, 2).join("_");
                let baseObj = document.getElementById(base_id);
                let width = baseObj.clientWidth;
                let textNode = document.getElementById(treeNode.tId+"_span");
                if (textNode) {
                    let maxWidth = width - 22*treeNode.level - 70;
                    textNode.style.width = `${maxWidth}px`;

                    let iconNode = document.getElementById(treeNode.tId+"_ico");
                    if (iconNode) {
                        iconNode.style.marginBottom = "12px";
                    }
                }
                let aNode = document.getElementById(treeNode.tId+"_a");
                if (aNode) {
                    aNode.style.backgroundColor = "";
                }
            }
        },
        addDiyDom(treeId, treeNode) {
            
        },
        asyncNodeDom(nodes, open) {
            
        },
        onNodeClick(e, treeId, treeNode) {
            if (!this.ztreeObj) {
                return;
            }
            //单击展开树节点
            if (treeNode.children && treeNode.children.length > 0) {
                if (treeNode.open) {
                    this.ztreeObj.expandNode(treeNode, false, false, false);
                } else {
                    this.ztreeObj.expandNode(treeNode, true, false, false);
                }
            }
        },

        }
    },
};
</script>

<style scoped>
</style>