a-tree 实现父级节点禁用，通过子级节点勾选状态控制

最新推荐文章于 2024-05-07 14:48:08 发布

原创

最新推荐文章于 2024-05-07 14:48:08 发布 · 2.1k 阅读

标签

#vue.js #html #前端

该文章展示了如何在Vue项目中使用a-tree组件创建一个具有折叠功能的选择框，并实现通过子节点的勾选状态控制父节点的选中状态。组件包含了全选、取消全选以及父子节点的联动逻辑，同时提供了初始化设置和监听设置的示例。

a-tree 组件实现折叠选择；使其父级节点禁用，通过子级节点的勾选状态来控制是否勾选；如果子级节点勾选任一个，父级节点就勾选中，如果子级节点全部不勾选则父节点不勾选，否则勾选，效果如下：

代码实现如下所示：

1、封装组件 setTableToolbar

vue 部分

<template>
    <div class="toolbar-meta">  
        <vxe-pulldown  ref="vxePulldown" transfer @hide-panel="hidePanel">
            <template #default>
                <a-button  shape="circle" @click="open()" :size="16">
                    <vxe-icon style="font-size: 20px;" name="setting"></vxe-icon> 
                </a-button>
            </template> 
            <template  #dropdown> 
                <div class="downBox" >
                    <!-- <div class="checkTopAll"> 
                        <a-checkbox 
                        v-model="checkAll"  
                        @change="onCheckAllChange"
                        >全部
                        </a-checkbox>
                    </div> -->
                    <div class="checkItem"> 
                        <a-tree  
                            v-if="plainOptions.length>0"
                            checkable
                            :checkStrictly="true"
                            :tree-data="plainOptions"  
                            :expandedKeys="expandedKeys"
                            :checkedKeys="checkedList"
                            :replace-fields="{children: 'children', title: 'title', key: 'id'}"
                            @expand="onExpand" 
                            @check="checkNode"
                        />
                    </div>
                     <!-- 底部按钮 -->
                     <div  class="downBtn clearfix">
                        <a-button class="btnOk" @click="sumbitOk">确认</a-button>
                        <a-button class="btnReset" @click="sumbitReset">全选</a-button>
                     </div>
                </div> 
            </template>
        </vxe-pulldown> 
    </div>
</template>

js部分代码设置：

export default {
    name: 'setTableToolbar',
    components: { 
    },
    props: { 
        columns: {
            type: Array, 
            default: [],
        }
    },
    data(){
        return { 
            expandParent: true,
            expandedKeys: [],
            indeterminate: true,
            userInfo: {},
            checkAll: false,
            checkedList: [],
            plainOptions: [],
            Downty

最低0.47元/天解锁文章