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

爱喝冰可乐

已于 2022-08-22 10:06:13 修改

阅读量9.7k

点赞数 5

文章标签： vue

于 2020-08-21 16:11:39 首次发布

本文链接：https://blog.csdn.net/u013361179/article/details/108149463

版权

今天在使用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;
    },