vue 树的使用

安装

npm install vue-jstree

<template>
    <div class="app-container">
        <h1>{{ msg }}</h1>
        <div>
            <v-jstree :data="data" allow-batch whole-row draggable @item-click="itemClick" ref="tree"></v-jstree>
        </div>
        <p>选择要编辑的节点</p>
        <div>
            <div style="width:600px; height:300px; margin: 0 auto;">
                <table>
					<tr>
						<td>
							节点编号
						</td>
						<td>
							<input disabled="disabled" v-model="editingItem.id" />
						</td>
					</tr>
                    <tr>
                        <td>
                            节点名称
                        </td>
                        <td>
                            <input v-model="editingItem.text" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button @click="addChildNode">添加子节点</button>
                            <button @click="removeNode">删除节点</button>
                            <button @click="addBeforeNode">当前节点前添加节点</button>
                            <button @click="addAfterNode">当前节后添加节点</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import VJstree from 'vue-jstree'
    export default {
        name: 'app',
        components: {
            VJstree
        },
        data() {
            return {
                msg: '编辑组织结构',
                searchText: '',
                editingItem: {},
                editingNode: null,
                data: [{
                    "text": "公司",
                    "children": [{
                            "text": "北京",
                        },
                        {
                            "text": "上海",
                        },
                        {
                            "text": "湖南",
                            "children": [{
                                "text": "长沙",
                            }]
                        },
                        {
                            "text": "湖北",
                            "children": [{
                                "text": "衡阳",
								"children": [{
										"text": "北京",
									},
									{
										"text": "上海",
									},
									{
										"text": "湖南",
										"children": [{
											"text": "长沙",
										}]
									},
									{
										"text": "湖北",
										"children": [{
											"text": "衡阳",
											"children": [{
													"text": "北京",
												},
												{
													"text": "上海",
												},
												{
													"text": "湖南",
													"children": [{
														"text": "长沙",
													}]
												},
												{
													"text": "湖北",
													"children": [{
														"text": "衡阳",
														"children": [{
																"text": "北京",
															},
															{
																"text": "上海",
															},
															{
																"text": "湖南",
																"children": [{
																	"text": "长沙",
																}]
															},
															{
																"text": "湖北",
																"children": [{
																	"text": "衡阳"
																}]
															},
															{
																"text": "广州",
															}
														]
													}]
												},
												{
													"text": "广州",
												}
											]
										}]
									},
									{
										"text": "广州",
									}
								]
                            }]
                        },
                        {
                            "text": "广州",
							"children": [{
									"text": "北京",
								},
								{
									"text": "上海",
								},
								{
									"text": "湖南",
									"children": [{
										"text": "长沙",
									}]
								},
								{
									"text": "湖北",
									"children": [{
										"text": "衡阳"
									}]
								},
								{
									"text": "广州",
								}
							]
                        }
                    ]
                }],
            }
        },
        methods: {
            itemClick(node) {
                this.editingNode = node
                this.editingItem = node.model
                console.log(node.model.text + ' clicked !')
            },
            inputKeyUp: function () {
                var text = this.searchText
                const patt = new RegExp(text);
                this.$refs.tree.handleRecursionNodeChilds(this.$refs.tree, function (node) {
                    if (text !== '' && node.model !== undefined) {
                        const str = node.model.text
                        if (patt.test(str)) {
                            node.$el.querySelector('.tree-anchor').style.color = 'red'
                        } else {
                            node.$el.querySelector('.tree-anchor').style.color = '#000'
                        } // or other operations
                    } else {
                        node.$el.querySelector('.tree-anchor').style.color = '#000'
                    }
                })
            },
            addChildNode: function () {
                if (this.editingItem.id !== undefined) {
                    this.editingItem.addChild({
                        text: "newNode"
                    })
                }
            },
            removeNode: function () {
                if (this.editingItem.id !== undefined) {
                    var index = this.editingNode.parentItem.indexOf(this.editingItem)
                    this.editingNode.parentItem.splice(index, 1)
                }
            },
            addBeforeNode: function () {
                if (this.editingItem.id !== undefined) {
                    this.editingItem.addBefore({
                        text: this.editingItem.text + " before"
                    }, this.editingNode)
                }
            },
            addAfterNode: function () {
                if (this.editingItem.id !== undefined) {
                    this.editingItem.addAfter({
                        text: this.editingItem.text + " after"
                    }, this.editingNode)
                }
            }
        }
    }
</script>

<style>
    /* #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    } */

    h1,
    h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    div {
        display: block;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #EEE;
        font-size: 14px;
    }

    table th {
        background: #EEE;
        border-bottom: 1px solid #CCC;
        padding: 4px;
    }

    table td {
        border: 1px solid #EEE;
        padding: 4px;
    }

    .icon-state-default {
        color: gray;
    }

    .icon-state-danger {
        color: red;
    }

    .icon-state-warning {
        color: yellow;
    }

    .icon-state-success {
        color: green;
    }
</style>