实战 element-plus 级联选择器(Cascader)+企微部门架构

先看效果 :

1、部门架构数据来源于企业微信;

2、部门层级关系的展现和勾选;

具体实现:

1、组件官方文档

http://element-plus.org/zh-CN/component/cascader.html

级联选择器组件要求的数据格式:

重点:了解清楚数据格式

2、后端写法(php)

php 复制代码
   // 递归查询负责的子部门(给 elementplus 组件用的)
    public static function getSubdepartments2($sub_id, $all_departments) {
        $output = array();
        foreach ($all_departments as $department) {
            if ($department['parent_id'] == $sub_id) {
                $arr = ['value'=>$department['id'],'label'=>$department['name']];
                // 继续判断是否有下一级
                $subdepartments = self::getSubdepartments2($department['id'], $all_departments);
                if (!empty($subdepartments)) {
                    // 返回所有子部门
                    // $arr['children'] = $subdepartments;
                    // 只返回两级
                    $arr[] = $subdepartments;
                }
                $output[] = $arr;
            }
        }
        return $output;
    }
     

    
   public function department($id=194){
      $row = Department::where('parent_id',$id)->field('id as value,name as label')->select();
      $alldeptlist = Department::select();
      foreach($row as &$val){
          // 查询是否有子部门
          $children = self::getSubdepartments2($val['value'],$alldeptlist);
            if(!empty($children)){
                $val['children'] = $children;
            }
      }
       if($row){
             $this->success('查询成功',$row);
         }else{
             $this->error('找不到数据!');
         }
   }

递归方法说明

另外一个注意点:

递归有可能返回空数组,可能会出现"空级联"的 bug,如下面这位老铁的文章提及到的:

那么我们在调用递归结果时,只需要判断是否为空(如上图 348 行代码),空就不要添加 children 对象了。

相关推荐
数智化商业4 天前
企业微信服务商如何助力3C电器品牌增长 37%?数据与案例拆解
企业微信
小魏的马仔5 天前
【企业微信】接口报错:javax.net.ssl.SSLHandshakeException
网络协议·企业微信·ssl
胡萝卜的兔5 天前
ssh域名过期,消息推送到企业微信
运维·ssh·企业微信
微盛AI企微管家5 天前
企业微信AI功能升级:选对企业微信服务商协助四大AI场景落地
大数据·人工智能·企业微信
kevin_cat7 天前
微信群机器人-备份文件发送通知
git·bash·企业微信
key_3_feng8 天前
MCP驱动企业微信智能中枢:企业级机器人服务构建全攻略
企业微信·mcp
javachen__8 天前
Spring Boot配置error日志发送至企业微信
spring boot·后端·企业微信
IT小农工9 天前
通过API接口管理企业微信通讯录案例
企业微信
东哥说-MES|从入门到精通9 天前
企业微信智能表格高效使用指南
数据分析·项目管理·企业微信·智能表格
泰迪智能科技10 天前
案例分享|企微智能会话风控系统:为尚丰盈铝业筑牢沟通安全防线
安全·企业微信