首页 > 其他分享 >Cascader级联选择器多选时获取所有选中状态的节点和半选状态的节点的数组集合

Cascader级联选择器多选时获取所有选中状态的节点和半选状态的节点的数组集合

时间:2023-09-19 09:25:40浏览次数:35  
标签:多选时 node code name 选择器 勾选 codeList 节点

<!-- Cascader级联选择器组件 -->
<el-cascader
  v-model="query.companyList"
  ref="searchCompanyCascaderRef"
  :options="permissionCompanyTree"
  :props="companyCascaderProp"
  collapse-tags
  clearable
></el-cascader>
// 树图数据
permissionCompanyTree: [
  {
    id: 2272,
    code: "610000000000",
    name: "陕西公安厅",
    children: [
      {
        id: 2271,
        code: "612400000000",
        name: "安康公安",
        children: [
          {
            id: 2273,
            code: "612428000000",
            name: "安康市镇坪县公安局",
            children: [
              {
                id: 2274,
                code: "612428010000",
                name: "镇坪县公安局国保大队",
                children: null
              }, {
                id: 2276,
                code: "612428020000",
                name: "镇坪县公安局国保大队2",
                children: null
              }
            ]
          }
        ]
      }
    ]
  }
]

// 级联选择器配置项
companyCascaderProp: {
  multiple: true,
  label: "name",
  value: "code",
  emitPath: false
},
// 获取所有选中状态的节点和半选状态的节点的数组集合
fn() {
  // 获取已勾选的叶子节点
  const leafNodeList = this.$refs.searchCompanyCascaderRef.getCheckedNodes(true)
  // 定义list用于存放父节点code
  let codeList = []
  // 先将勾选中的叶子节点的code存入到codeList中
  leafNodeList.forEach(item => {
    codeList.push(item.value)
  })
  // 根据勾选节点往上查找其父节点, 先判断父节点的勾选状态为勾选或者半选, 再判断list中是否已有该父节点的code, 如果没有, 则将父节点的code存入数组中
  for (let i = 0; i < leafNodeList.length; i++) {
    // 调用递归方法
    this.getCodeList(codeList, leafNodeList[i])
  }
  console.log(codeList)
},

// 递归查找并获取级联选择器勾选状态和半勾选状态的节点的code数组集合
getCodeList(list, node) {
  // 若父节点存在 && 父节点勾选状态为勾选或者半选 && codeList中没有该父节点的code
  if ((node.parent) && (node.parent.checked || node.parent.indeterminate) && (!list.includes(node.parent.value))) {
    // 将符合条件的节点的code存入到codeList中
    list.push(node.parent.data.code)
    // 以leafNodeList[i]为准, 调用递归函数并继续往下查找符合条件的父节点
    this.getCodeList(list, node.parent)
  }
},

勾选状态如下:
image

通过fn方法获取的codeList如下:
image

标签:多选时,node,code,name,选择器,勾选,codeList,节点
From: https://www.cnblogs.com/0510zhongBang/p/17713665.html

相关文章

  • OpenStack(Train版)-部署keystone(controller节点)
    三、部署keystone(controller节点)3.1.1、简介3.1.1.1、作用1.用户管理:验证用户身份信息合法性2.认证服务:提供了其余所有组件的认证信息/令牌的管理,创建,修改等等,使用MySQL作为统一的数据库。3.Keystone是Openstack用来进行身份验证(authN)及高级授权(authZ)的身份识别服务,目前支持基......
  • KingbaseES V8R6集群运维案例之---在线扩容节点通讯故障问题
    案例说明:KingbaseESV8R6集群节点之间通过ssh或securecmdd工具通讯,默认节点之间通过公钥和私钥方式认证,可以密码通讯;在执行集群节点扩容时,出现以下故障,节点之间仍需要输入密码进行连接:适用版本:KingbaseESV8R6一、问题分析1、测试节点securecmdd通讯如上所示:通过securec......
  • FSICO-BACOS单机四节点到Webase平台搭建简洁步骤
    bashbuild_chain.sh-l127.0.0.1:4-p30300,20200,8545其中-l指定ip列表,-p表示p2p,....端口号,生成的四个节点端口号为30300~30303安装ubuntu依赖sudoaptinstall-yopensslcurl安装centos依赖sudoyuminstall-yopensslopenssl-devel第二步.创建操作目......
  • 调整节点部署pod数上限
    默认单节点部署pod数上限是110,超过时会调度失败。vim/var/lib/kubelet/config.yamlmaxPods:300systemctlrestartkubelet......
  • 通过UltraSync减轻主节点负担、提升业务系统性能,AntDB如何做到?
    众所周知,数据库在多中心场景下,主中心主库不仅要承担原本业务的压力,而且还要将redo日志传输到不同的备库端,这样对主库将产生很大的性能影响。通常情况下,备中心和主中心不在同⼀机房,为了保证业务响应速度,主中心主节点和备中心各主节点之间的复制流通常是异步的,当主中心发生故障时,主......
  • idb单副本时-TiKV节点损坏后有损数据恢复的方法
    Tidb单副本时-TiKV节点损坏后有损数据恢复的方法背景UAT环境下,为了减少存储.搭建了一套单副本的TiDB集群但是随着数据量的增多,UAT上面的数据可以丢失,但是表结构等信息是无法接受丢失和损坏的.因为很多不太均衡的问题,导致.部分TiKV节点不稳定.甚至会出现TiKV宕机的......
  • Vue-选择器v-model绑定对象
    Vue-选择器v-model绑定对象<template><el-selectv-model="value"placeholder="请选择"><el-optionv-for="iteminoptions":key="item.value":label="item.label":value=&quo......
  • oracle获取xml节点数据
    1.新增获取节点函数CREATEORREPLACEFUNCTIONget_xml_nodeValue(xmlStrCLOB,nodeNameVARCHAR2)RETURNVARCHAR2ISxmlParxmlparser.Parser:=xmlparser.newParser;xDocxmldom.DOMDocument;lenItme......
  • 三节点master修改apiserver端口
    因业务需求,需要把apiserver的6443端口改成其它端口,k8s集群是二进制部署的,有三个master节点,调整方法如下1.修改apiserver启动service中的配置查看apiserver的service文件位置systemctlstatuskube-apiserver,找到/usr/lib/systemd/system/kube-apiserver.service修改--secure-p......
  • 过滤树,返回符合条件的节点以及它的上级节点,以及是否保留它的下级节点
    constfilterReceiveDeptTree=computed(()=>{if(state.filterText){letdeepclone=deepClone(state.receiveDeptTree);constfilteredTree=filterTree(deepclone,(node)=>{returnnode......