首页 > 其他分享 >element-ui tree权限树

element-ui tree权限树

时间:2022-08-31 18:58:04浏览次数:50  
标签:selectArr list selected tree element item ui asyncSelect children

在权限中父子集不关联,一开始,我以为default-checked-keys值不对,最后看了文档,原来是check-strictly被开启了

 

          <el-tree
            ref="menu"
            :data="permissionSelectList"
            :default-checked-keys="permissionArr"
            :props="defaultProps"
            show-checkbox
            node-key="permissionId"
          />

 

 首先去掉了,然后父子联动没有问题了,但是,又出现了新的问题,主要病症出现在半选的父节点数据上,接口要求是半选的节点也要提交的,但是点击修改,回显的时候,因为提交了半选的数据,此时,selected是1,勾选的状态,导致回显都是被选中的状态。

修改方案:回显过滤一下数据

1、过滤menu,selected为1

// 递归获取  已选择的权限
function getSelectSermissions(list) {
  const selectArr = [];
  function asyncSelect(list) {
    return list.filter((item) => {
      if (item.selected && item.selected === "1") {
        selectArr.push(item.permissionId);
      }
      // 判断是否有子组件
      if (item.children && item.children.length) {
        asyncSelect(item.children);
      }
      return true;
    });
  }
  asyncSelect(list);
  return selectArr;
}

2、过滤menu的children,selected为0,

标签:selectArr,list,selected,tree,element,item,ui,asyncSelect,children
From: https://www.cnblogs.com/wang715100018066/p/16644199.html

相关文章

  • CF620E NewYearTree
    题目链接  主要要实现区间覆盖和区间查询不同数,看见区间赋值操作可能会想到\(ODT\)来实现,区间查询不同数直接另外开一个数组记录一下就好了,但很可惜\(TLE\)了,代码如下:......
  • mybatis 实体使用@Builder 与 @Data时,赋值错误
    最近在工作中遇到了一个问题,使用mybatis新增数据的时候,定义好一个实体类,填充对应的数据并插入表之后。根据返回的id查询的时候,发现本不应该有数据的字段有数据返回,找了......
  • 浅谈-java GUI-基础理论
    GUI:GraphicalUserInterface(图形用户接口)用图形的方式,用来显示计算机操作的界面Java为GUI提供的API都存在java.awt和javax.Swing两个包中java.awt包:awt是这三个......
  • Vue中报npm WARN idealTree Removing dependencies.element-ui in favor of devDepend
    在添加element-ui的时候我是用的是:npmielement-ui--save-dev或npmielement-ui-S都会报错npmWARNidealTreeRemovingdependencies.element-uiinfavorofdevD......
  • 小技巧:在VBA中查找SAP GUI Scripts 脚本对象层次结构视图
    SAPGUIScript提供了很多功能,单靠录脚本的方法去发现有点不太灵活,查SAP官方的网页也是一种可行的办法。下面介绍通过VBA直接在本地查看,方便快捷。安装好SAPGUI以后,在......
  • easyui-switchbutton 默认 选中
    默认选中主要是在 html 加入  checked<tdstyle="width:65px;">创建时间:</td><td><inputid="switch_date_entered"class="easyui-switchbutton"style="wid......
  • XmlReader & XElement 遍历大文件xml,不使用内存。测试可以读取6G的xml
    [TestMethod]publicvoidTestMethod1(){//try//{//stringresult=newBoDowJonesWatchlistAutoUpdate().......
  • XElement类来读取XML
    <Table><Product><Product_id>1</Product_id><Product_name>Product1</Product_name><Product_p......
  • UIPATH Orchestrator配置
    Orchestrator简介UiPathOrchestrator是一个网页应用程序,使您能够在执行重复的业务流程时编排UiPath机器人。Orchestrator使您可以管理环境中资源的创建、监控和部署......
  • 003.PySimpleGUI
    1.基本模板#1.导入库importPySimpleGUIassg#2.定义布局、确定行数layout=[[],[],[],[],[]]#3.创建窗口window=sg.Window('P......