树形结构如何让某些个复选框处于选中状态?

646 阅读1分钟

已经获取到了数据了,如何把它填充到el-tree中,让某些个复选框处于选中状态?

答: setCheckedKeys (接收勾选节点数据的数组) node-key(设置目前勾选的节点,使用此方法必须设置 node-key=‘’ 属性)

官网: element.eleme.io/#/zh-CN/com…

Sni8-44.png . 给tree补充属性node-key

<!-- 权限点数据展示 -->
    <el-tree
      ref="refTree"
      :data="permissionData"
      //渲染数据
      :props="{ label: 'name' }"
      //默认展开树形结构
      :default-expand-all="true"
      //显示复选框
      :show-checkbox="true"
      设置true可以关闭父子关联(比如选中员工管理测试也会同时选中设置为true就不会关联)
      :check-strictly="true"
+     node-key="id"
    />

调用setCheckedKeys

//  调用接口,获取当前这个角色已经具备的权限
    async loadPermissionByRoleId() {
      // 根据roleId获取当前这个角色已经具备的权限
      const res = await getRoleDetail(this.roleId)
      this.permIds = res.data.permIds
      console.log('获取当前角色的已有的权限点数据', this.permIds)
      // 回填到树上
+      this.$refs.refTree.setCheckedKeys(this.permIds这里是选中的id)
    }
//保存权限分配的数据
 async hSubmit() {
    //重新拿到树上的permIds
      this.permIds = this.$refs.refTree.getCheckedKeys()
      await assignPerm({ id: this.roleId, permIds: this.permIds })
      this.$message.success('保存角色的权限成功')
      this.$emit('close')
       // 重置选择,用了v-if可不写
      //  this.$refs.tree.setCheckedKeys([])
    },