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

先看效果 ：

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('找不到数据！');}}

递归方法说明

另外一个注意点：

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

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