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

相关推荐
hj104312 天前
【企业微信开发】jssdk实现h5图片上传
企业微信
hj104313 天前
企业微信wecom/jssdk的使用(入门)
uni-app·企业微信
企销客CRM13 天前
CRM管理系统的用户权限设置与管理技巧:构建安全高效的数字化运营体系
大数据·数据库·人工智能·数据分析·企业微信
挨踢诗人16 天前
Python实现企业微信Token自动获取到SQLite存储
python·sqlite·企业微信·数据集成
企销客CRM16 天前
企微CRM系统中的任务分配与效率提升技巧
大数据·数据库·人工智能·数据分析·企业微信
鼠鼠我捏,要死了捏16 天前
Java开发企业微信会话存档功能笔记小结(企业内部开发角度)
java·企业微信·会话存档
企销客CRM16 天前
SCRM软件数据分析功能使用指南:从数据挖掘到商业决策
数据库·人工智能·数据挖掘·数据分析·企业微信
企销客CRM22 天前
实施企业预算管理的企微CRM系统技巧:从成本控制到价值创造
大数据·数据库·人工智能·企业微信
九亿少女的梦@25 天前
企业微信对接:回调地址带#时返回地址参数位置不对的问题
vue·企业微信·企微单点登录
焚天&无夜1 个月前
企微获取会话内容,RSA 解密函数
java·企业微信·rsa解密·会话内容·pkcs1解密算法