(1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据
重点:handleNodeClick方法、getTreeNode方法
(2) 选择el-breadcrumb-item设置el-tree节点选中
必须设置属性: current-node-key="currentNodeKey" 、 node-key="id"
重点: 设置树节点渲染 this.$refs.tree.setCurrentKey(item.id)
(3) 右键点击树节点展示菜单
重点:handleNodeContextmenu方法、showTreeMenu方法、设置active样式
(4) 树节点编辑节点字段名称
重点:handleTreeNodeNameEdit方法、submitTreeNodeNameEdit方法文章来源:https://www.toymoban.com/news/detail-586296.html
<template>
<div class="sqm-file-page">
<el-row>
<el-col :span="4">
<div class="grid-left-content">
<el-tree ref="tree" :data="treeData" :props="defaultProps" node-key="id" highlight-current :default-expanded-keys="defaultExpandedKeys" :current-node-key="currentNodeKey" :expand-on-click-node="false" @node-click="handleNodeClick" @node-contextmenu="handleNodeContextmenu">
<template #default="{ node, data }">
<!-- 如果是编辑状态 -->
<template v-if="data.isEdit == 1">
<el-input ref="treeNodeNameInput" v-model="treeNodeName" class="name-input" @blur="() => submitTreeNodeNameEdit(node, data)" />
</template>
<!-- 如果不是编辑状态 -->
<span v-else v-text="data.name" />
<i class='el-icon-edit-outline' @click.stop="() => handleTreeNodeNameEdit(node, data)" />
</template>
</el-tree>
<div ref="treeMenu" class="tree-menu">
树节点右键菜单内容
</div>
</div>
</el-col>
<el-col :span="20">
<div class="grid-right-content">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in breadList" :key="index" @click.native="handleBreadcrumbItem(item, index)">{{ item.name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import {findTree} from '@/api/sqm//qf/api'
export default {
name: 'SqmFileList',
data() {
return {
treeData: [],
defaultExpandedKeys: [1],
currentNodeKey: '',
defaultProps: {
children: 'sqmFileList',
label: 'name'
},
activeNode: {}, // 选中的节点
breadList: [], // 面包屑数组
treeNodeName: '' // 树节点编辑时名称
}
},
created() {
const that = this
that.getTree()
},
methods: {
// el-tree数据
getTree() {
const that = this
findTree().then(res => {
let expandedKeys = []
for (let i = 0; i < res.data.length; i++) {
expandedKeys.push(res.data[i].id)
}
that.defaultExpandedKeys = expandedKeys
that.treeData = res.data
that.breadList = res.data
})
},
// 树节点点击
handleNodeClick(data, node) {
const that = this
// 设置树节点选中
this.$set(data, 'isChecked', true)
// 获取面包屑
this.breadList = []
this.getTreeNode(this.$refs.tree.getNode(data.id))
that.activeNode = data
},
// 获取当前树节点和其父级节点
getTreeNode(node) {
if (node && node.data.name) {
this.breadList.unshift(node.data)
this.getTreeNode(node.parent) // 递归
}
},
// 点击面包屑
handleBreadcrumbItem(item, index) {
// 设置树节点当前选中的key
this.currentNodeKey = item.id
// 重点: 设置树节点渲染
this.$refs.tree.setCurrentKey(item.id)
// 删除选中面包屑后面的面包屑
this.breadList.splice(index + 1, this.breadList.length)
},
// 树节点鼠标右键点击
handleNodeContextmenu(e, data, node, target) {
// 树节点选中之后才能展示树节点菜单
if (data.isChecked) {
this.showTreeMenu(e, data, node, target)
}
},
// 展示树节点菜单
showTreeMenu(e, data, node, target) {
const menu = this.$refs.treeMenu
const menuHeight = menu.clientHeight
console.log(menuHeight)
const x = e.pageX // 触发点到页面窗口左边的距离
const y = e.pageY // 触发点到页面窗口顶部的距离
if ((document.body.clientHeight - y) >= menuHeight) {
menu.style.top = y + 'px'
menu.style.bottom = 'auto'
} else {
menu.style.top = 'auto'
menu.style.bottom = document.body.clientHeight - y + 'px'
}
menu.style.left = x + 'px'
menu.classList.add('active')
console.log(menu)
},
// 树节点编辑
handleTreeNodeNameEdit(node, data) {
this.$set(data, 'isEdit', 1)
this.treeNodeName = data.name
this.$nextTick(() => {
this.$refs.treeNodeNameInput.focus()
})
},
// 树节点编辑后输入框失焦提交
submitTreeNodeNameEdit(node, data) {
if (data.name == this.treeNodeName) {
console.log('没有修改')
this.treeNodeName = ''
this.$set(data, 'isEdit', 0)
} else {
this.$set(data, 'name', this.treeNodeName)
this.treeNodeName = ''
this.$set(data, 'isEdit', 0)
// 此处...编辑完成后调用接口
}
},
}
}
</script>
<style lang="less" scoped>
.sqm-file-page {
.grid-left-content {
margin-right: 10px;
::v-deep.el-tree-node {
position: relative;
font-size: 14px;
// 设置选中节点样式
&.is-current>.el-tree-node__content {
background-color: #1456F01A;
color: #1456F0;
}
.custom-tree-node {
width: 100%;
align-items: center;
justify-content: space-between;
i {
padding-right: 20px;
}
.el-icon-edit-outline {
position: absolute;
right: 20px;
top: 5px;
}
div.name-input {
.el-input__inner {
width: 55%;
height: 21px;
}
}
}
}
// 树节点右键菜单样式
.tree-menu {
position: fixed;
width: 130px;
border: 1px solid #DEDEDF;
border-radius: 6px;
background-color: #ffffff;
box-shadow: 0 6px 24px #F4F5F5;
visibility: hidden;
}
.active {
visibility: visible;
z-index: 2;
}
}
.grid-right-content {
::v-deep.el-breadcrumb {
padding: 40px 0 20px 0;
.el-breadcrumb__item {
cursor: pointer;
.el-breadcrumb__inner {
font-size: 16px;
color: #646A73;
}
&:last-child {
.el-breadcrumb__inner {
color: #1F2329;
}
}
}
}
}
}
</style>
代码仅供参考 具体实现根据具体实际情况! 文章来源地址https://www.toymoban.com/news/detail-586296.html
到了这里,关于Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!