vue使用ztree增加删除，修改和添加等的页面样式

<template>
    <div>
        <ul id="tree" class="ztree customZTreeStyle"></ul>
        <h3 class="iconfont dzyjwodekanjia">icon</h3>
    </div>
</template>

<script>
import $ from '../../../utils/jquery-vendor'
import 'ztree';
import 'ztree/js/jquery.ztree.core.min';
import 'ztree/js/jquery.ztree.excheck.min';
import 'ztree/js/jquery.ztree.exedit.min';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import '../../../assets/css/zTreeStyle.scss'

export default {
    data() {
        return {
            tree_obj: null,
            tree_setting: {},
            tree_list: [
                {
                    id: 1, name: "华南区", children: [
                        {id: 111, name: "张三"},
                        {id: 112, name: "李四"},
                    ]
                },
                {
                    id: 2, name: "西南区", children: [
                        {id: 221, name: "王五"},
                        {id: 222, name: "李六"},
                    ]
                }
            ]
        }
    },
    methods: {
        initTree() {
            const setting = {
                view: {
                    selectedMulti: false,
                    showIcon: false,//去掉图标
                    showLine: true,
                    nameIsHTML: true,
                    addHoverDom: this.addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件
                    removeHoverDom: this.removeHoverDom, //当鼠标移动到节点上时，显示用户自定义控件
                    // removeHoverDom: this.removeHoverDom(treeId, treeNode), //离开节点时的操作
                },
                check: {
                    chkStyle: 'checkbox',//复选框类型
                    enable: true,//每个节点是否显示checkbox
                    chkboxType: {
                        'Y': 'ps',
                        'N': 'ps'
                    }
                },
                edit: {
                    enable: true,
                    editNameSelectAll: true,
                    showRemoveBtn: false, //true表示显示删除按钮
                    showRenameBtn: false,//true显示修改按钮
                    drag: {
                        isCopy: false,
                    }
                },
            }
            this.tree_obj = $.fn.zTree.init($('#tree'), setting, this.tree_list);
        },
        addHoverDom(treeId, treeNode) {
            let aObj = $("#" + treeNode.tId + "_a");
            if ($('#addBttton_' + treeNode.id).length > 0) return;
            let editStr = `
            <div id="addBttton_${treeNode.id}" class="editCatalog">
                <i class="iconfont dzyjtianjia add" title="添加"></i>
                <i class="iconfont dzyjxiugai1 edit" title="修改"></i>
                <i class="iconfont dzyjchangyonggoupiaorenshanchu delete" title="删除"></i>
            </div>
        `;
            aObj.append(editStr);
            let btn = $('#addBttton_' + treeNode.id);
            if (btn) {
                $(".add").bind("click", this.getAddHandle);
                $(".edit").bind("click", this.getEditHandle);
                $(".delete").bind("click", this.getDeleteHandle);
            }
        },
        removeHoverDom(treeId, treeNode) {
            $("#addBttton_" + treeNode.id).unbind().remove();
            // $("#diyBtn_space_" + treeNode.id).unbind().remove()
        },
        //添加
        getAddHandle() {
            console.log('添加')
        },
        // 修改
        getEditHandle() {
            console.log('修改')
        },
        //删除
        getDeleteHandle() {
            console.log('删除')
        }
    },
    created() {
        let _this = this
        $(document).ready(function () {
            _this.initTree()
        });
    }
}
;
</script>

<style>
@import url('//at.alicdn.com/t/font_3199171_hy6le906kn8.css');
/*.ztree {*/
/*    width: 300px;*/
/*    height: 500px;*/
/*    border: 1px solid #ffe6b0;*/
/*}*/
.editCatalog {
    display: none;
    font-size: 22px;
    color: #2c3e50;

}

.add, .delete, .edit {
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
}
</style>