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

hj10432024-09-02 15:44

先看效果：

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