使用element的Tree树形控件，节点选中状态下设置禁用disabled

谁践踏了优雅 2023-06-11 13:28 65阅读 0赞

需求：使用ElementUi Tree树形控件,节点选中状态下设置禁用disabled

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
本案例代码如下：

<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>
    
            
        </div>
    
    </template>
    
    <script>
        export default {
            name: "TreeTest3",
            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 :'';
    
                        })
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    <style lang="stylus" >
    
    </style>

其他说明：  
1，ElementUi Tree树形控件 的使用请参考官方网站 ElementUI API  
https://element.eleme.cn/2.0/\#/zh-CN/component/tree\#tree-shu-xing-kong-jian  
2，通过disabled 设置Tree的某些节点为禁用状态,通过案例发现，disabled 是在数组中的对象的一个属性，  
如案列代码所示：

<el-tree
      :data="data3"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]">
    </el-tree>

3，在选中的时候，将当前节点的disabled修改为true  
通过函数迭代的方式，在数组对象中添加disabled变量  
说明：arrMenus默认是\[ \],不存在是null的情况，所以没有加判断

dealTreeOnceChecked(arrMenus){
     	if(arrMenus.length > 0){
    		arrMenus.forEach(item => {
    			let arrChildren = item.childrenList 
    			if(arrChildren  !=null) this.dealTreeOnceChecked(arrChildren)
    			item.xxx === '选中时的值' ? item.disabled = true : item.disabled = false
    	})
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230531/4bc0e983c51b4a30907574d32a3cd863.png