SOURCE

treeCompent =
Vue.component('ln-tree', {
    template: "#item_template",
    props: {
        node: Object,
    },
    data() {
        return {
            open: true,
            openA: false,
            content: '',
        }
    },
    methods: {
        switchShow() {
            this.open = !this.open;
        },
        abc() {
            this.content = this.node.txt
            this.openA = true
        },
        abd() {
            this.node.txt = this.content
            this.openA = false
            alert("修改成功")
        },
        Delete() {
            node = this.node
            delete node.children
            delete node.txt
            console.log(node)
            this.node = node
            this.open = false
        }
    },
    //属性计算
    computed: {
        nodeIcon() {
            if (this.node.children) {
                return this.open ? '-' : '+'
            } else {
                return ' '
            }
        }
    },
})

dome = new Vue({
    el: '#acc',
    data: {
        tree: {
            txt: "目录",
            children: []
        }
    },
    mounted() {
        axios.get('http://www.mesdk.com/TP5_learning/progress/progress_show').then(response => {
            // 处理数据生成符合多级联动json数据
            var arrA = response.data.data.result;
            var _arr = arrA;
            var arr = [];
            var key_arr = [{
                keys: ['relation_subject', 'subject'],
                children: 'children'
            },
                {
                    keys: ['relation_version', 'version_name'],
                    children: 'children'
                },
                {
                    keys: ['relation_grade', 'grade_name'],
                    children: 'children'
                },
                {
                    keys: ['relation_section', 'section'],
                    children: 'children'
                }
            ];
            _arr.forEach(v => {
                var _cache = arr;
                key_arr.forEach(o => {
                    var _index = _cache.findIndex(val => val[o.keys[0]] == v[o.keys[0]])
                    if (!~_index) {
                        var _obj = {}
                        o.keys.forEach(k => {
                            _obj[k] = v[k]
                        })
                        _obj[o.children] = []
                        _cache.push(_obj)
                        _children = _obj;
                    } else {
                        _children = _cache[_index]
                    }
                    _cache = _children[o.children]
                })
                _cache.push({
                    "knowsid": v.knowsid,
                    "knows": v.knows,
                })
            })
            arr = JSON.stringify(arr)
            arr = arr.replace(/"subject"/g, '"txt"').replace(/"version_name"/g, '"txt"').replace(/"grade_name"/g, '"txt"').replace(/"section"/g, '"txt"').replace(/"knows"/g, '"txt"')
            arr = JSON.parse(arr)
            this.tree.children = arr
        })
    },
})

<script type="text/x-template" id="item_template">
    <div class="ln_tree_div">
        
        <div class="ln_tree_h1" @click="switchShow">
            <nobr @click.stop>{{node.txt}}</nobr>
            <button class="ln_tree_button">{{nodeIcon}}</button>
            <nobr class="acc" @click.stop>
                <button @click="abc" v-if="openA === false">修改</button>
                <button @click="Delete" v-if="openA === false">删除</button>
                <input v-model="content" v-if="openA">
                <button @click="abd" v-if="openA">确认修改</button>
            </nobr>
        </div>
        <template v-if="node.children && open">
            <ln-tree v-for="(item,index) in node.children" :node="item" :key="index"></ln-tree>
        </template>
    </div>
</script>

<div id="acc" class="container">
    <!--:node="tree":给props的node属性传变量tree-->
    <ln-tree :node="tree"></ln-tree>
</div>

.search {
    width: 300px;
    /*长度*/
    size: '1';
    background-color: #D8D8D8;
    /*背景颜色*/
    border: 1px solid #277de2;
}

.ln_tree_div {
    padding-left: 20px;
}

/*.ln_tree_button{
  display:none;
}*/
.ln_tree_h1:hover button {
    display: inline-block
}

/*树形菜单*/

.acc button{
    display:none;
}
.ln_tree_h1:hover button {
    display: inline-block
}
/*鼠标悬停的效果*/

.ln_tree_div{
    position: relative;
}
.ln_tree_div:before{
    content: '';
    position: absolute;
    left: 0;top:0;bottom:0;
    border-left: 1px solid #f00;
}