功能描述：
1、自定义树节点前展开收起图标
2、可对节点数据进行模糊查询
3、右击第一级节点可以进行同级节点增加
4、双击节点或点击修改节点 都可以对节点获取焦点并进行修改，回车修改成功
5、可对节点进行拖拽，实现节点移动功能
6、右击节点可进行增删改
效果图：
html布局：
html代码
@node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" @node-contextmenu="rightClick" :filter-node-method="filterNode" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" ref="tree" class="tree-line"> {{ node.label }} @blur.stop="NodeBlur(node, data)" @keydown.native.enter="NodeBlur(node, data)">
CSS样式
输入框校验
NodeBlur(Node, data) {
console.log(Node, data)
if (data.label.length === 0) {
this.$message.error('菜单名不可为空！')
return false
} else {
if (data.isEdit) {
this.$set(data, 'isEdit', false)
console.log(data.isEdit)
}
this.$nextTick(() => {
this.$refs['slotTreeInput' + data.id].$refs.input.focus()
})
}
},
查询功能
// 查询
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
}
},
拖拽功能
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === '二级 3-1') {
return type !== 'inner'
} else {
return true
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('三级 3-2-2') === -1
},
handleDragStart(node, ev) {
console.log('drag start', node)
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label)
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label)
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label)
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType)
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType)
},
鼠标事件
// 鼠标右击事件
rightClick(event, object, Node, element) {
console.log(event, object)
this.currentData = object
this.currentNode = Node
if (Node.level === 1) {
this.firstLevel = true
} else {
this.firstLevel = false
}
this.menuVisible = true
document.addEventListener('click', this.foo)
// 将菜单显示在鼠标点击旁边定位
this.menu_left = event.clientX -140;
this.menu_top = event.clientY - 40;
},
// 鼠标左击事件
handleLeftclick(data, node) {
this.foo()
},
// 取消鼠标监听事件 菜单栏
foo() {
this.menuVisible = false
// 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
document.removeEventListener('click', this.foo)
},
增加同级节点事件
// 增加同级节点事件
addSameLevelNode() {
let id = Math.ceil(Math.random() * 100)
var data = { id: id, label: '新增节点' }
this.$refs.tree.append(data, this.currentNode.parent)
},
增加子级节点事件
// 增加子级节点事件
addChildNode() {
console.log(this.currentData)
console.log(this.currentNode)
if (this.currentNode.level >= 3) {
this.$message.error('最多只支持三级！')
return false
}
let id = Math.ceil(Math.random() * 100)
var data = { id: id, label: '新增节点' }
this.$refs.tree.append(data, this.currentNode)
},
删除节点
// 删除节点
deleteNode() {
this.$refs.tree.remove(this.currentNode)
},
编辑节点
// 编辑节点
editNode(data) {
console.log(data)
this.currentData = data ? data : this.currentData
if (!this.currentData.isEdit) {
this.$set(this.currentData, 'isEdit', true)
}
// 获取焦点
this.$nextTick(() => {
this.$refs['slotTreeInput' + this.currentData.id].focus()
})
},
整体代码
@node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" @node-contextmenu="rightClick" :filter-node-method="filterNode" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" ref="tree" class="tree-line"> {{ node.label }} @blur.stop="NodeBlur(node, data)" @keydown.native.enter="NodeBlur(node, data)">
参考阅读
发表评论