vue2+Element-UI弹出层中带复选框的树结构反填

vue2+Element-UI弹出层中带复选框的树结构反填

前言

​ 我们做RBAC时候做角色的权限设置时在弹出权限列表时可能需要反填该角色现有的权限，所以以下案例是个按简单的RBAC的角色权限的树结构的反填。

案例

​ 1、最关键的是树要有node-key属性，因为树的很多方法都要使用到这个属性

<!-- 权限分配弹出层 -->
<el-dialog
      title="权限分配"
      :visible.sync="permissionVisible"
      width="40%"
      @close="$refs.tree.setCheckedKeys([])"
    >
      <span>
        <!-- 树 -->
        <h2>角色名称：{{ selectedRName }}</h2>

        <!-- :default-checked-keys="defaultChecked" -->
        <el-tree
          :data="permissionList"
          show-checkbox
          default-expand-all
          node-key="PId"
          :props="defaultProps"
          ref="tree"
        >
        </el-tree>
      </span>
      <span slot="footer">
        <el-button type="primary" @click="saveAssign">保存</el-button>
      </span>
    </el-dialog>

​ 2、使用ref="[treeName]"属性给树加引用，这样可以使用this.$refs.[treeName]选中该树，但是要注意关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

<script>
export default {
  data() {
    return {
      permissionVisible: false,
      //权限树
      permissionList: [],
      defaultProps: {
        children: "Children",
        label: "MPName",
      },      
    };
  },
  methods: {   
    //权限分配
    assignPermission(entity) {
      //console.log(entity);
      this.selectedRId = entity.RId;      
      //反填树
      this.axios
        .get("/api/Permission/GetPermissionsByRId?rId=" + entity.RId)
        .then((res) => {
          let rolePermissions = res.data.Data;
          //循环设置节点的选中状态，使用el-tree的setChecked()方法
          rolePermissions.forEach((x) => {
            this.$refs.tree.setChecked(x.PId, true);
          });
        });
      this.permissionVisible = true;
    },
  },
};
</script>

​ 3、可能出现的问题this.$refs打印出显示undefined的问题

​ 这里提供一个别的大神的解决办法：

​ ①如果你在 mounted 里获取 this.$refs，因为 dom 还未完全加载，所以你是拿不到的， update 阶段则是完成 了数据更新到 DOM 的阶段 (对加载回来的数据进行处理)，此时，就可以使用 this.$refs 了

​ ②如果写在 method 中，那么可以使用 this.$nextTick (() => {}) 等页面渲染好再调用，这样就可以了

总结

​ 总而言之，关于树结构的反填也有很多方法，我只是提供其中一种思路，只要最后达到效果就好。

参考：

​ https://element.eleme.cn/#/zh-CN/component/tree

​