网站建设与维护方式,网站建设店,顺企网贵阳网站建设,邢台网站设计哪家专业(1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据 重点#xff1a;handleNodeClick方法、getTreeNode方法
(2) 选择el-breadcrumb-item设置el-tree节点选中 必须设置属性: current-node-keycurrentNodeKey 、 node-keyid 重点: 设置…(1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据 重点handleNodeClick方法、getTreeNode方法
(2) 选择el-breadcrumb-item设置el-tree节点选中 必须设置属性: current-node-keycurrentNodeKey 、 node-keyid 重点: 设置树节点渲染 this.$refs.tree.setCurrentKey(item.id)
(3) 右键点击树节点展示菜单 重点handleNodeContextmenu方法、showTreeMenu方法、设置active样式 (4) 树节点编辑节点字段名称 重点handleTreeNodeNameEdit方法、submitTreeNodeNameEdit方法
templatediv classsqm-file-pageel-rowel-col :span4div classgrid-left-contentel-tree reftree :datatreeData :propsdefaultProps node-keyid highlight-current :default-expanded-keysdefaultExpandedKeys :current-node-keycurrentNodeKey :expand-on-click-nodefalse node-clickhandleNodeClick node-contextmenuhandleNodeContextmenutemplate #default{ node, data }!-- 如果是编辑状态 --template v-ifdata.isEdit 1el-input reftreeNodeNameInput v-modeltreeNodeName classname-input blur() submitTreeNodeNameEdit(node, data) //template!-- 如果不是编辑状态 --span v-else v-textdata.name /i classel-icon-edit-outline click.stop() handleTreeNodeNameEdit(node, data) / /template/el-treediv reftreeMenu classtree-menu树节点右键菜单内容/div/div/el-colel-col :span20div classgrid-right-contentel-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-item v-for(item, index) in breadList :keyindex click.nativehandleBreadcrumbItem(item, index){{ item.name }}/el-breadcrumb-item/el-breadcrumb/div/el-col/el-row/div
/templatescript
import {findTree} from /api/sqm//qf/apiexport default {name: SqmFileList,data() {return {treeData: [],defaultExpandedKeys: [1],currentNodeKey: ,defaultProps: {children: sqmFileList,label: name},activeNode: {}, // 选中的节点 breadList: [], // 面包屑数组treeNodeName: // 树节点编辑时名称}},created() {const that thisthat.getTree()},methods: {// el-tree数据getTree() {const that thisfindTree().then(res {let expandedKeys []for (let i 0; i res.data.length; i) {expandedKeys.push(res.data[i].id)}that.defaultExpandedKeys expandedKeysthat.treeData res.datathat.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) {// 设置树节点当前选中的keythis.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.treeMenuconst menuHeight menu.clientHeightconsole.log(menuHeight)const x e.pageX // 触发点到页面窗口左边的距离const y e.pageY // 触发点到页面窗口顶部的距离if ((document.body.clientHeight - y) menuHeight) {menu.style.top y pxmenu.style.bottom auto} else {menu.style.top automenu.style.bottom document.body.clientHeight - y px}menu.style.left x pxmenu.classList.add(active)console.log(menu)},// 树节点编辑handleTreeNodeNameEdit(node, data) {this.$set(data, isEdit, 1)this.treeNodeName data.namethis.$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)// 此处...编辑完成后调用接口}},}}
/scriptstyle langless 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代码仅供参考 具体实现根据具体实际情况!
