首页 > 其他分享 >vue2+Element-UI弹出层中带复选框的树结构反填

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

时间:2024-03-03 21:55:05浏览次数:28  
标签:中带 树结构 refs 反填 entity 出层 复选框 权限

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

标签:中带,树结构,refs,反填,entity,出层,复选框,权限
From: https://www.cnblogs.com/keepingstudying/p/18050823

相关文章

  • Protable 树结构移除选中行
    信铁寒胜:它里面这个迭代的思想还是比较有用的。要在ProTable树形结构中实现移除选中行的功能,你需要做以下几步:在ProTable的父组件中定义数据源 data 和一个函数用于移除行。在ProTable组件中传入数据源和定义一个列,其中包含一个操作列,可以在该列中添加一个移除按钮。......
  • c#树结构转npoi复杂表头
    Vue前端框架框架中采用树结构打印表头,为了前后端适配NPOI导出。这里重点做树结构转换 NPOI复杂表头的结构数据(跨行、跨列),其它具体导出功能请参考  https://www.cnblogs.com/lwk9527/p/17374291.html 导出后实际效果 源数据json版[{"Title":"账号"......
  • 遍历转树结构
    遍历转树结构{varlist=newList<Foo>{newFoo("111",1),newFoo("112",2),newFoo("113",2),newFoo("114",2),newFoo("115",3),newFoo("116",1),newFoo("......
  • 简单树结构生成
    实体:@Data@EqualsAndHashCode(callSuper=false)@Accessors(chain=true)@ApiModel(value="EduSubject对象",description="课程科目")publicclassEduSubjectimplementsSerializable{privatestaticfinallongserialVersionUID=1L;@ApiMode......
  • 树结构及前中后续遍历
    publicclassTree{publicstaticvoidmain(String[]args){Treeroot=newTree(50);Tree.insert(root,30);Tree.insert(root,60);Tree.insert(root,70);Tree.insert(root,100);Tree.insert(root,80);......
  • 二叉树结构与递归实现前中后序遍历
    1.二叉树结构2.二叉树节点遍历顺序前序:每颗子树以中—》左—》右遍历ABDEHCFG 中序:每颗子树以左 —》中—》右遍历DBEHAFCG 后序:每颗子树以左 —》右—》中遍历DHEBFGCA 代码实现:publicclassBinaryTree{stat......
  • 浅谈WPF之Popup弹出层
    在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何在WPF开发中,通过Popup实现鼠标点击弹出浮动停靠窗口,仅供学习分享使用,如有不足之处,还请指正。 什么是......
  • JSON中带多余反斜杠?原来是滥用FastJSON造成的!
    以前对接很多老系统的接口是发现对方返回的JSON往往有些不太对劲,例如{"key_1":"A","key_2":"{\"name\":\"Tom\"}"}由于以前我使用springBoot自带的Jackson,因此从未自己造成这种现象,然而最近在对接一个接口时,我自己使用FastJSON时恰巧就复制了一模一样的bug:我当时就......
  • Python 对树结构数据输出序号(文档目录)层级
    input_data=[{'title':'试验干预中止和参与者退出试验','children':[{'title':'试验干预中止','children':[{'title......
  • 关于layui使用弹出层模版后对应上传组件不工作的问题记录
    这里页面的聊天室是使用的弹出层:util.on('lay-on',{'open-chat-room':function(){layer.open({title:'项目聊天室',type:1,offset:&#......