实战 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 对象了。

相关推荐
nVisual8 天前
nVisual对接企业微信实现机房设备与连接变更的自动化审批
运维·服务器·网络·自动化·企业微信·机房设备
longzl12311 天前
企业微信实现“关联外部选项“、“审批控件中的外部选项“
java·开发语言·企业微信
网络工程师_ling15 天前
Zabbix—企业微信报警群通消息通知
企业微信·zabbix
夜莺云原生监控19 天前
夜莺监控 v8.0 新版通知规则 | 对接企微告警
企业微信·监控告警·夜莺监控·企微·企微告警
anguruanjian1 个月前
安固软件指南:确保外发文件安全的全面策略
服务器·网络·安全·企业微信·安固软件
夜猫的兔子1 个月前
企业微信console调试
前端·企业微信·conlose
uesowys1 个月前
阿里云 | 快速在企业微信中集成一个AI助手
人工智能·阿里云·企业微信·智能体应用
zyplayer-doc1 个月前
知识库适配DeepSeek,企业微信支持自动登录,授权支持过期时间设置,zyplayer-doc 2.4.9 发布啦!
编辑器·飞书·企业微信·开源软件·有道云笔记·石墨文档
C182981825751 个月前
企业微信获取用户信息
企业微信
GoFly开发者1 个月前
Golang集成企业微信接收消息服务处理URL接口(验证、解密)信息(GoFly快速开发框架)
golang·企业微信·go企业微信开发