安装
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>