关于element-ui tree树形控件中:default-checked-keys的问题

今天在使用element-ui中的tree控件时,我想要默认选中角色拥有权限的复选框时,发现即使改变了:default-checked-keys,也不能改变渲染结果,需要调用this.$refs.tree.setCheckedKeys 方法来改变选中状态.

<el-dialog
title="提示"
:visible.sync="setRightsDialogVisible"
width="30%"
@close="clearDefaultCheckedKeys"
>
<el-tree
:data="rightsList"
:props="rightsTreeProps"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defaultCheckedKeys"
ref="rightsTree"
></el-tree>
<span slot="footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>

但此时又会有另一个问题,当弹框没有渲染的时候,由于tree控件dom没有加载,setCheckedKeys是不存在的,会报错,所以我们需要使用this.$nextTick(callback)方法,该方法会在dom加载完毕之后,执行回调函数

showSetRightsDialog(scope) {
const rolerights = scope.row.children;
this.recursion(rolerights);
this.$nextTick(() => {
this.$refs.rightsTree.setCheckedKeys(this.defaultCheckedKeys);
});
this.setRightsDialogVisible = true;
},

• 点赞
• 收藏
• 分享
• 文章举报