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

news2024/9/21 2:37:58

先看效果：

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

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

具体实现：

1、组件官方文档

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

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

重点：了解清楚数据格式

2、后端写法（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('找不到数据！');
         }
   }