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

最新推荐文章于 2025-03-06 14:38:38 发布

帅帅的记忆

最新推荐文章于 2025-03-06 14:38:38 发布

阅读量1.6w

点赞数 1

分类专栏： vue遍历 Element UI Tree树形控件文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/weixin_44994731/article/details/103922275

版权

Element UI Tree树形控件同时被 2 个专栏收录

6 篇文章

订阅专栏

vue遍历

3 篇文章

订阅专栏

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

<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>
        <!--  :default-checked-keys="defaultCheckedKeys" -->
    </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>