(1) 點(diǎn)擊el-tree節(jié)點(diǎn) 使用el-breadcrumb展示選中樹節(jié)點(diǎn)及父項(xiàng)數(shù)據(jù)
? ? ? ? 重點(diǎn)：handleNodeClick方法、getTreeNode方法
(2) 選擇el-breadcrumb-item設(shè)置el-tree節(jié)點(diǎn)選中?
? ? ? ? ?必須設(shè)置屬性: current-node-key="currentNodeKey"? 、?node-key="id"
?????????重點(diǎn): 設(shè)置樹節(jié)點(diǎn)渲染?this.$refs.tree.setCurrentKey(item.id)?
(3) 右鍵點(diǎn)擊樹節(jié)點(diǎn)展示菜單?
????????重點(diǎn)：handleNodeContextmenu方法、showTreeMenu方法、設(shè)置active樣式??
?(4) 樹節(jié)點(diǎn)編輯節(jié)點(diǎn)字段名稱
?????????重點(diǎn)：handleTreeNodeNameEdit方法、submitTreeNodeNameEdit方法文章來(lái)源：http://www.zghlxwxcb.cn/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 }">
<!-- 如果是編輯狀態(tài) -->
<template v-if="data.isEdit == 1">
<el-input ref="treeNodeNameInput" v-model="treeNodeName" class="name-input" @blur="() => submitTreeNodeNameEdit(node, data)" />
</template>
<!-- 如果不是編輯狀態(tài) -->
<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">
樹節(jié)點(diǎn)右鍵菜單內(nèi)容
</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: {}, // 選中的節(jié)點(diǎn)
breadList: [], // 面包屑數(shù)組
treeNodeName: '' // 樹節(jié)點(diǎn)編輯時(shí)名稱
}
},
created() {
const that = this
that.getTree()
},
methods: {
// el-tree數(shù)據(jù)
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
})
},
// 樹節(jié)點(diǎn)點(diǎn)擊
handleNodeClick(data, node) {
const that = this
// 設(shè)置樹節(jié)點(diǎn)選中
this.$set(data, 'isChecked', true)
// 獲取面包屑
this.breadList = []
this.getTreeNode(this.$refs.tree.getNode(data.id))
that.activeNode = data
},
// 獲取當(dāng)前樹節(jié)點(diǎn)和其父級(jí)節(jié)點(diǎn)
getTreeNode(node) {
if (node && node.data.name) {
this.breadList.unshift(node.data)
this.getTreeNode(node.parent) // 遞歸
}
},
// 點(diǎn)擊面包屑
handleBreadcrumbItem(item, index) {
// 設(shè)置樹節(jié)點(diǎn)當(dāng)前選中的key
this.currentNodeKey = item.id
// 重點(diǎn): 設(shè)置樹節(jié)點(diǎn)渲染
this.$refs.tree.setCurrentKey(item.id)
// 刪除選中面包屑后面的面包屑
this.breadList.splice(index + 1, this.breadList.length)
},
// 樹節(jié)點(diǎn)鼠標(biāo)右鍵點(diǎn)擊
handleNodeContextmenu(e, data, node, target) {
// 樹節(jié)點(diǎn)選中之后才能展示樹節(jié)點(diǎn)菜單
if (data.isChecked) {
this.showTreeMenu(e, data, node, target)
}
},
// 展示樹節(jié)點(diǎn)菜單
showTreeMenu(e, data, node, target) {
const menu = this.$refs.treeMenu
const menuHeight = menu.clientHeight
console.log(menuHeight)
const x = e.pageX // 觸發(fā)點(diǎn)到頁(yè)面窗口左邊的距離
const y = e.pageY // 觸發(fā)點(diǎn)到頁(yè)面窗口頂部的距離
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)
},
// 樹節(jié)點(diǎn)編輯
handleTreeNodeNameEdit(node, data) {
this.$set(data, 'isEdit', 1)
this.treeNodeName = data.name
this.$nextTick(() => {
this.$refs.treeNodeNameInput.focus()
})
},
// 樹節(jié)點(diǎn)編輯后輸入框失焦提交
submitTreeNodeNameEdit(node, data) {
if (data.name == this.treeNodeName) {
console.log('沒(méi)有修改')
this.treeNodeName = ''
this.$set(data, 'isEdit', 0)
} else {
this.$set(data, 'name', this.treeNodeName)
this.treeNodeName = ''
this.$set(data, 'isEdit', 0)
// 此處...編輯完成后調(diào)用接口
}
},
}
}
</script>
<style lang="less" scoped>
.sqm-file-page {
.grid-left-content {
margin-right: 10px;
::v-deep.el-tree-node {
position: relative;
font-size: 14px;
// 設(shè)置選中節(jié)點(diǎn)樣式
&.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;
}
}
}
}
// 樹節(jié)點(diǎn)右鍵菜單樣式
.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>
代碼僅供參考 具體實(shí)現(xiàn)根據(jù)具體實(shí)際情況!?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-586296.html
到了這里，關(guān)于Vue單頁(yè)面實(shí)現(xiàn)el-tree el-breadcrumb功能、el-tree右鍵點(diǎn)擊樹節(jié)點(diǎn)展示菜單功能、樹節(jié)點(diǎn)編輯節(jié)點(diǎn)字段名稱功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
