解决ElementUi树结构默认选中的事件(最完美的解决方案)

最近做一个后台管理系统,使用了ElementUi的el-tree组件,并且带有选中效果的,当对数据进行修改操作时,需要将原有的选中数据渲染到树结构中,data以及default-checked-keys的数据都是从后台获取的数据,所以在进行修改操作时,并没有按照预期的能把选中的效果体现出来,后来一想才发现,原来渲染el-tree前,就得拿到default-checked-keys的选中数据,否则默认选中状态就不会得到渲染;

        <el-tree
                    v-if="isShowTree"
                    :data="zTree"
                    :props="defaultProps"
                    :default-checked-keys="defaultTree"
                    node-key="cDptCde"
                    ref="tree"
                    show-checkbox
                    @check-change="handledeptNodeClick"
                    class="div-border box-card">
            </el-tree>

于是,我使用了一个isShowTree的状态,当获取到数据详情时,并且拿到default-checked-keys后,设置isShowTree=true,如果有使用到props时属性时,一定要等获取到data数据时再渲染el-tree,也就是说要同时拿到data数据&&default-checked-keys数据时才能设置isShowTree便可完美的渲染出带选中效果的树形结构,如果有道这个问题解决不了的,可以试一试!使用

        computed: {
           /*从后台获取递归数据*/
            zTree() {
                return this.$store.getters.zTree.tree
            },
            /*是否展示机构数*/
            isShowTree(){
               // this.zTree.length --->如果leng>0,代表已获取到data的数据
               // this.isGetDetail--->如果isGetDetail为true,则说明已经获取到default-checked-keys的数据
                return this.zTree.length&&this.isGetDetail
            }

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值