thinkphp5递归获取Element Ui的Cascader 级联选择器数据

第一部分：前端部分

最终效果

数据库数据

Element Ui 的Cascader 级联选择器数据应用：

<el-cascader
      v-model="value"
      :options="dep_jobs"
      :props="{ expandTrigger: 'hover',value:'id',label:'classname' }"
      @change="handleChange">
</el-cascader>

说明：

Cascader默认调用的是 :options绑定的数据源里面的value及label。

这里可以通过props配置绑定的对应键名。我这里value对应数据库中的id，label对应我的classname

第二部分：后端部分

    /**
     * 递归子级
     * @param array $arr
     * @param int $id
     * @return array
     * */
    protected function findChild(&$arr,$id){
        $children=array();
        foreach ($arr as $key => $value) {
            if($value['pid']==$id) $children[]=$value;
        }
        return $children;
    }

    /**
     * 查找当前级别的子级
     * @param array $data
     * @param int $root_id
     * @return array
     * */
    protected function build_tree($data,$root_id){
        $children=$this->findChild($data,$root_id);

        if(empty($children))return null;

        foreach ($children as $key => $value) {
            $resCurTree=$this->build_tree($data,$value['id']);
            if(null != $resCurTree){
                $children[$key]['children']=$resCurTree;
            }
        }
        return $children;
    }

    // 请求的接口
    public function fetchDepAndJob(){

        $data = Db::table('staff_role')->field("*")->select();

        $backArr = $this->build_tree($data,0);

        return self::back_json('200',$backArr);     

    }

请求接口给前端返回的数据格式：

{
	"code": "200",
	"msg": "OK",
	"data": [
		{
			"id": 1,
			"classname": "行政部",
			"orderby": 50,
			"pid": 0
		},
		{
			"id": 2,
			"classname": "财务部",
			"orderby": 50,
			"pid": 0
		},
		{
			"id": 3,
			"classname": "客服部",
			"orderby": 50,
			"pid": 0,
			"children": [
				{
					"id": 12,
					"classname": "前台",
					"orderby": 50,
					"pid": 3
				},
				{
					"id": 13,
					"classname": "会籍",
					"orderby": 50,
					"pid": 3
				},
				{
					"id": 14,
					"classname": "保洁",
					"orderby": 50,
					"pid": 3
				}
			]
		},
		{
			"id": 4,
			"classname": "销售部",
			"orderby": 50,
			"pid": 0
		},
		{
			"id": 5,
			"classname": "市场部",
			"orderby": 50,
			"pid": 0,
			"children": [
				{
					"id": 8,
					"classname": "健身教练",
					"orderby": 50,
					"pid": 5
				},
				{
					"id": 9,
					"classname": "主管",
					"orderby": 50,
					"pid": 5
				}
			]
		},
		{
			"id": 6,
			"classname": "广告部",
			"orderby": 50,
			"pid": 0,
			"children": [
				{
					"id": 10,
					"classname": "审核专员",
					"orderby": 50,
					"pid": 6
				},
				{
					"id": 11,
					"classname": "业务员",
					"orderby": 50,
					"pid": 6
				}
			]
		},
		{
			"id": 7,
			"classname": "其他",
			"orderby": 50,
			"pid": 0
		}
	]
}