el-tree基础的树形节点设置节点不能选中高亮出来，对已经选中的节点设置disabled，对当前节点刚选中后设置禁用disabled
一、 el-tree基础的树形节点设置节点不能选中高亮出来
需求
我们使用element-ui或者element-plus的时候会遇到树形控件的使用，我们使用树形控件会限制有的节点不让选中和高亮出来，这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的，我们就简单来实现一下。
实现效果如下：
vue2+element-ui
发现element-ui中更改current-node-key值无效，最后用this.$refs.tree.setCurrentKey方法实现了
实现的思路：
- el-tree加上highlight-current属性，高亮当前选中节点
- ref="tree"绑定组件
- el-tree的点击事件@node-click中判断是有子元素的节点，则找到上次高亮的节点，让它继续选中高亮，思路是通过node-key="id"和this.$refs.tree.setCurrentKey方法
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
highlight-current
ref="tree"
node-key="id"
>
handleNodeClick(data, node) {
//设置不能选中的节点
if (data.disabled) {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodeKey);
});
return;
}
this.currentNodeKey = data.id;
}
vue3+element-plus
发现element-plus中更改current-node-key值是有效的，通过这个属性实现
思路：
- el-tree加上highlight-current属性，高亮当前选中节点
- el-tree的点击事件@node-click中判断有子元素的节点不能选中高亮，核心代码node.isCurrent = false，让当前节点取消选中
- 这时需要找到上次高亮的节点，让它继续选中高亮，思路是通过node-key与current-node-key属性
<template>
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
highlight-current
node-key="id"
:current-node-key="currentNodeKey"
default-expand-all
:expand-on-click-node="false"/>
</template>
<script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node'
import { ref, nextTick } from "vue"
interface Tree {
label: string
children?: Tree[]
}
const currentNodeKey = ref("")
const treeId = ref("")
const handleNodeClick = (data: Tree, node: Node) => {
// 有子元素的节点，不能选中
if (data.children.length) {
node.isCurrent = false
// 值更改，触发watch
currentNodeKey.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-tree
ref="tree"
:data="menuData"
show-checkbox
node-key="node_id"
:props="defaultProps2"
:default-checked-keys="checkedId"
/>
defaultProps2: {
children: 'children',
label: 'name',
disabled: function(data, node) {
// 禁用回收站选项
if (data.level === 3) {
return true
}
}
}
三、对当前节点刚选中后设置禁用disabled（设置多复选框为不可编辑，只有选中后就不能编辑操作）
实现效果如下：
具体操作如下：
html
<template>
<div class="tree3">
<span>设置多选复选框为不可编辑，只要选中就不可编辑</span>
<div style="margin-left: 600px;width:100%">
<el-tree
:data="data3"
ref="tree"
show-checkbox
node-key="id"
:check-on-click-node="checkNodeFlag"
:default-expanded-keys="[2, 3]"
@check-change="handleCheckChageFun"
@check="handleCheckFun"
>
</el-tree>
</div>
<!-- :default-checked-keys="defaultCheckedKeys" -->
</div>
</template>
js
data() {
return {
checkNodeFlag:false,
currNodeId:'',//当前选中nodeId
defaultCheckedKeys:[],
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= null
this.dealTreeOnceChecked(this.data3)
},
dealTreeOnceChecked(arrMenus){
arrMenus === undefined ? arrMenus=[]:''
if(arrMenus.length > 0){
//let disarr = [];
arrMenus.forEach(item => {
let arrChildren = item.children
if(arrChildren !== null) this.dealTreeOnceChecked(arrChildren)
item.id === this.currNodeId ? item.disabled = true :'';
})
}
}
}