<template>
    <div class="wrapper">
        <pop-nav :nav-list="navList"></pop-nav>
        <pop-title>{{$t("store.shopCategory.title")}}</pop-title>
        <div class="btn-group">
            <pop-button type="danger">{{ $t("store.shopCategory.btnDelete") }}</pop-button>
            <pop-button type="primary">{{ $t("store.shopCategory.btnExpandAll") }}</pop-button>
            <pop-button type="primary">{{ $t("store.shopCategory.btnCollapseAll") }}</pop-button>
        </div>
        <div class="category-title">
            <div class="left-title">{{ $t("store.shopCategory.catetoryTitle") }}</div>
            <div class="right-title">{{ $t("store.shopCategory.addSubCategoryTitle") }}</div>
        </div>
        <div class="category-tree-wrapper">
            <ul id="ul_shop_category_tree" class="ztree"></ul>
        </div>
        <div class="add-category">
            <pop-button type="primary">{{ $t("store.shopCategory.btnAddCategory") }}</pop-button>
        </div>
        <div class="text-center">
            <pop-button type="primary">{{ $t("store.shopCategory.btnSave") }}</pop-button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import popNav from "components/common/PopNav";
import popTitle from "components/common/PopTitle";
import popButton from "components/common/PopButton";
import "ztree/css/zTreeStyle/zTreeStyle.css";
import $ from "jquery";
import "ztree/js/jquery.ztree.all.min";

// const HIDDEN_NODE_NAME = "-9999999999";
export default {
data () {
    return {
        cateList: [{
            "children": [{
                "id": 886,
                "name": "new subcategory1"
            }, {
                "id": 887,
                "name": "new subcategory2"
            }],
            "id": 885,
            "name": "new main category1",
            "shopId": 125
        }, {
            "children": [{
                "id": 889,
                "name": "new subcategory3"
            }, {
                "id": 890,
                "name": "new subcategory4"
            }],
            "id": 888,
            "name": "new main category2",
            "shopId": 125
        }, {
            "children": [{
                "id": 892,
                "name": "new subcategory5"
            }, {
                "id": 893,
                "name": "new subcategory6"
            }],
            "id": 891,
            "name": "new main category3",
            "shopId": 125
        }, {
            "children": [{
                "id": 895,
                "name": "new subcategory7"
            }, {
                "id": 896,
                "name": "new subcategory8"
            }],
            "id": 894,
            "name": "new main category4",
            "shopId": 125
        }, {
            "children": [{
                "id": 898,
                "name": "new subcategory9"
            }, {
                "id": 899,
                "name": "new subcategory10"
            }],
            "id": 897,
            "name": "new main category5",
            "shopId": 125
        }]
    };
},
mounted () {
    this._initTreeData();
},
methods: {
    _initTreeData () {
        if (this.cateList) {
            var setting = {
                edit: {
                    drag: {
                        autoExpandTrigger: true
                        // prev: dropPrev,
                        // inner: dropInner,
                        // next: dropNext
                    },
                    enable: true,
                    showRemoveBtn: true,
                    showRenameBtn: true
                },
                data: {
                    key: {
                        children: "children"
                    }
                },
                callback: {
                    // beforeDrag: beforeDrag,
                    // beforeRemove: beforeRemove,
                    // beforeRename: beforeRename,
                    // onRemove: onRemove
                },
                view: {
                    showTitle: false,
                    showIcon: false,
                    nameIsHTML: true
                }
            };
      
            let ztree = $.fn.zTree.init($("-sharpul_shop_category_tree"), setting, this.cateList);
            ztree.expandAll(true);
            let ztreeNode = ztree.getNodesByParam("level", 0);
            // var hiddenTreeNode;
            for (let i = 0, len = ztreeNode.length; i < len; iPP) {
                let aObj = $("-sharp" + ztreeNode[i].tId + "_a");
                aObj.append("<span name="span_add_category" class="add-category">+Add SubCategory</span>");
               
            }
        }
    }
},
components : {
    popNav, popTitle, popButton
},
computed: {
    navList () {
        return [
            this.$t("store.shopCategory.navFirstLevel"),
            this.$t("store.shopCategory.navSecondLevel"),
            this.$t("store.shopCategory.navThirdLevel")
        ];
    }
}

};
< / script >

< style lang= "stylus" rel= "stylesheet/stylus" scoped >

.wrapper
    .btn-group
        padding: 29px 21px
    .category-title
        border-top: 1px solid -sharpe2e2e2
        border-bottom: 1px solid -sharpe2e2e2
        background-color: -sharpf4f5f9
        height: 44px
        line-height: 44px
        color: -sharp333
        font-size: 14px
        font-weight: bold
        .left-title
            display: inline-block
            width: 553px
            padding-left: 33px
        .right-title
            display: inline-block
    .category-tree-wrapper
        padding: 12px 33px
        border-bottom: 1px solid -sharpe2e2e2
        /*ztree*/
        .ztree
            width: 500px
            padding: 0
            overflow: visible
            & *
                box-sizing: border-box;
                font-size: 20px;
                font-weight: 700;
                font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","",Arial,sans-serif !important;
        .ztree li
                background-color: red
            li span.button
                    background-image: url("./zTree_standard_category.png") !important
                    &.root_close,
                    &.roots_close,
                    &.center_close,
                    &.bottom_close,
                    &.noline_close
                        width: 7px
                        height: 12px
                        background-position: -3px -8px
                    &.root_docu,
                    &.roots_docu,
                    &.center_docu,
                    &.bottom_docu,
                    &.noline_docu
                        margin-top: 14px
                        margin-right: 7px
                        width: 18px
                        height: 18px
                        background-position: -3px -64px
            li span.button.edit
                width: 19px;
                height: 17px;
                background-position: -3px -43px;
        .ztree li span.button.root_open,
        .ztree li span.button.roots_open,
        .ztree li span.button.center_open,
        .ztree li span.button.bottom_open,
        .ztree li span.button.noline_open {
            width: 11px;
            height: 7px;
            background-position: -3px 0;
        }
        .ztree li span.button.remove {
            width: 21px;
            height: 21px;
            background-position: 0 -21px;
        }
        .ztree li span.node_name{
            display: inline-block;
            width: 390px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .ztree li ul.line {
            background: none;
        }
        .ztree li a {
            position: relative;
            border: 1px solid -sharpe2e2e2;
            width: 420px;
            height: 34px !important;
            line-height: 34px;
            margin-top: 12px !important;
            padding: 0 15px;
        }

        .ztree li span {
            line-height: 34px;
        }
        .ztree li span.button.ico_close,
        .ztree li span.button.ico_open {
            vertical-align: middle !important;
        }
        .ztree li span.button.edit {
            position: absolute;
            top: -8px;
            right: 18px;
        }
        .ztree li span.button.remove {
            position: absolute;
            right: -10px;
            top: -10px;
            margin: 0;
        }
        .ztree li a.curSelectedNode,
        .ztree li a.curSelectedNode_Edit {
            background-color: -sharpfff;
            border: 1px solid -sharpe2e2e2;
        }
        .ztree li span.add {
            margin-top: -3px;
            background-position: -145px 0;
        }
        .ztree li a input.rename {
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 15px;
            height: 32px;
            width: 418px;
            margin: 0;
            font-size: 14px;
            border: none;
        }
        .ztree li a input:focus.rename {
            padding: 0 15px;
        }
        .ztree li span.add-category {
            position: absolute;
            left: 504px;
            color: -sharp0664b6;
            font-size: 14px;
        }
    .add-category
        padding: 20px 26px

< / style >

for example:

 li
    background-color: red
 li span.button
    background-image: url("./zTree_standard_category.png") !important

did not take effect. I don"t know why