长安建网站公司,外网npv加速器,网站开发基础培训,杭州企业营销网站建设公司一、 el-tree基础的树形节点设置节点不能选中高亮出来
需求
我们使用element-ui或者element-plus的时候会遇到树形控件的使用#xff0c;我们使用树形控件会限制有的节点不让选中和高亮出来#xff0c;这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus…一、 el-tree基础的树形节点设置节点不能选中高亮出来
需求
我们使用element-ui或者element-plus的时候会遇到树形控件的使用我们使用树形控件会限制有的节点不让选中和高亮出来这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的我们就简单来实现一下。
实现效果如下 vue2element-ui
发现element-ui中更改current-node-key值无效最后用this.$refs.tree.setCurrentKey方法实现了 实现的思路
el-tree加上highlight-current属性高亮当前选中节点reftree绑定组件el-tree的点击事件node-click中判断是有子元素的节点则找到上次高亮的节点让它继续选中高亮思路是通过node-keyid和this.$refs.tree.setCurrentKey方法 el-tree:datatreeData:propsdefaultPropsnode-clickhandleNodeClickhighlight-currentreftreenode-keyidhandleNodeClick(data, node) {//设置不能选中的节点if (data.disabled) {this.$nextTick(() {this.$refs.tree.setCurrentKey(this.currentNodeKey);});return;}this.currentNodeKey data.id;}
vue3element-plus
发现element-plus中更改current-node-key值是有效的通过这个属性实现 思路
el-tree加上highlight-current属性高亮当前选中节点el-tree的点击事件node-click中判断有子元素的节点不能选中高亮核心代码node.isCurrent false让当前节点取消选中这时需要找到上次高亮的节点让它继续选中高亮思路是通过node-key与current-node-key属性
templateel-tree :datadata :propsdefaultProps node-clickhandleNodeClick highlight-current node-keyid :current-node-keycurrentNodeKeydefault-expand-all:expand-on-click-nodefalse/
/templatescript langts setup
import type Node from element-plus/es/components/tree/src/model/node
import { ref, nextTick } from vue
interface Tree {label: stringchildren?: Tree[]
}const currentNodeKey ref()
const treeId ref()
const handleNodeClick (data: Tree, node: Node) {// 有子元素的节点不能选中if (data.children.length) {node.isCurrent false// 值更改触发watchcurrentNodeKey.value // 还原之前的高亮节点nextTick(() {currentNodeKey.value treeId.value})return}treeId.value data.id// 点击树节点执行的代码...
}const data: Tree[] [{label: Level one 1,children: [{label: Level two 1-1,children: [{label: Level three 1-1-1,},],},],},{label: Level one 2,children: [{label: Level two 2-1,children: [{label: Level three 2-1-1,},],},{label: Level two 2-2,children: [{label: Level three 2-2-1,},],},],},{label: Level one 3,children: [{label: Level two 3-1,children: [{label: Level three 3-1-1,},],},{label: Level two 3-2,children: [{label: Level three 3-2-1,},],},],},
]const defaultProps {children: children,label: label,
}
/script
二、 对已经选中的节点设置disabled
el-tree 动态渲染值对已知节点disabled
实现思路
从后台动态获取的树的数据项目需求要把其中的某一个节点设置为禁用在data中配置el-tree的props我这里是已知节点的数据 判断节点id来设置disabled el-treereftree:datamenuDatashow-checkboxnode-keynode_id:propsdefaultProps2:default-checked-keyscheckedId/
defaultProps2: {children: children,label: name,disabled: function(data, node) {// 禁用回收站选项if (data.level 3) {return true}}
}三、对当前节点刚选中后设置禁用disabled设置多复选框为不可编辑只有选中后就不能编辑操作
实现效果如下 具体操作如下
html
templatediv classtree3span设置多选复选框为不可编辑只要选中就不可编辑/spandiv stylemargin-left: 600px;width:100%el-tree:datadata3reftreeshow-checkboxnode-keyid:check-on-click-nodecheckNodeFlag:default-expanded-keys[2, 3]check-changehandleCheckChageFuncheckhandleCheckFun/el-tree/div!-- :default-checked-keysdefaultCheckedKeys --/div/template
js data() {return {checkNodeFlag:false,currNodeId:,//当前选中nodeIddefaultCheckedKeys:[],data3: [{id: 1,label: 一级 2,disabled:false,children: [{id: 3,label: 二级 2-1,disabled:false}, {id: 2,label: 二级 2-2,disabled:false},{id: 4, label: 2级 4,disabled:false},{id: 5, label: 2级 5,disabled:false},{id: 6, label: 2级 6,disabled:false},{id: 7, label: 2级 7,disabled:false},{id: 8, label: 2级 8,disabled:false},{id: 9, label: 2级 9,disabled:false},{id: 10, label: 2级 10,disabled:false},{id: 11, label: 2级 11,disabled:false},{id: 12, label: 2级 12,disabled:false},{id: 13, label: 2级 13,disabled:false},{id: 14, label: 2级 14,disabled:false},{id: 15, label: 2级 15,disabled:false},{id: 16, label: 2级 16,disabled:false},{id: 17, label: 2级 17,disabled:false},{id: 18, label: 2级 18,disabled:false},]}],disableData:this.data3,defaultProps: {children: children,label: label}};
},
methods:{handleCheckChageFun(currNode){console.log(hanleCheckChageFun---);},handleCheckFun(currNode){this.currNodeId currNode.id;this.defaultCheckedKeys nullthis.dealTreeOnceChecked(this.data3)},dealTreeOnceChecked(arrMenus){arrMenus undefined ? arrMenus[]:if(arrMenus.length 0){//let disarr [];arrMenus.forEach(item {let arrChildren item.childrenif(arrChildren ! null) this.dealTreeOnceChecked(arrChildren)item.id this.currNodeId ? item.disabled true :;})}}}
