使用element的Tree树形控件，节点选中状态下设置禁用disabled,每次选一个，且不可编辑

谁践踏了优雅 2023-06-29 02:54 4阅读 0赞

使用element的Tree树形控件，节点选中状态下设置禁用disabled,每次选一个，且不可编辑，效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
代码如下：

<template>
        <div class="tree3">
    
            <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>
    
    </template>
    
    <script>
        export default {
            name: "TreeTest3",
            data() {
                return {
                    checkNodeFlag:false,
                    currNodeId:'',//当前选中nodeId
                    defaultCheckedKeys:[18],
                    data3: [{
                        id: 1,
                        label: '一级 2',
                        disabled:false,
                        children: [{
                            id: 3,
                            label: '二级 2-1',disabled:false
                        }, {
                            id: 2,
                            label: '二级 2-2',
                        },
                        {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:true},
    
                        ]
                    }],
                    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)
                            if(item.id === this.currNodeId){
                               // disarr.push(item.id)
                                //this.defaultCheckedKeys = disarr;
                                this.$refs.tree.setCheckedKeys([item.id]);
                                 item.disabled = true
                            }else{
                                item.disabled = false
                            }
                        })
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    <style lang="stylus" >
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200110120614825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70