element ui级联选择器--懒加载数据

一、vue模板

<el-cascader :props="destiOptionsr" clearable placeholder="请选择目的地2" v-model="value"></el-cascader>

二、JAVASCRIPT代码，加载数据源

export default {
  name: "Truckprice",
  data() {
    return {
        destiOptionsr:{
        //懒加载的方式加载数据源
        lazy:true,
        //this.getData定义加载数据源的方法
        lazyLoad: this.getData,
      },
    },
  methods:{
    getData(node,resolve){
      //node是当前点击的节点
      const { data } = node;
      //获取当前被点击的节点的value
      const val=node.value;
      //如果没有子节点，回调函数resolve返回空
      if (data && ((data.haschild === false) || (data.leaf === true))) {
        return resolve([]);
      }
      let zone = {
        zone: val,
      };
      //被点击的节点的value传输到后端，一共两级，如果value为空，说明请求的是第一级的数据，如果value不为空，说明请求的是第二级的数据
      this.$axios.post(this.$host + 'api/gettrucknetwork',zone).then(res => {
        resolve(res.data);
      })
    },
  }
  }

三、tp5提供后端数据

 //获取拖车网点，element ui懒加载
    public function gettrucknetwork(Request $request){
        //获取前端传递过来的参数zone
        $zone=$request->param('zone');
        $data=[];
        //如果zone为空，则在数据表FivLcltruckPrice中搜索zone，作为第一级数据返回
        if($zone==''||$zone==null){
            $zone=FivLcltruckPrice::distinct(true)->field('zone')->select();
            foreach($zone as $key=>$value){
                $data[$key]['value']=$value->zone;
                $data[$key]['label']=$value->zone;
                //一共两级，这是第一级，所以不是叶子节点leaf=false
                $data[$key]['leaf']=false;
            }
        }else{
            //如果zone不为空，则在数据表FivLcltruckPrice中搜索address，作为第二级数据返回
            $address=FivLcltruckPrice::where('zone',$zone)->field('address')->select();
            foreach($address as $key=>$value){
                $data[$key]['value']=$value->address;
                $data[$key]['label']=$value->address;
                //一共两级，这是第二级，所以是叶子节点leaf=true
                $data[$key]['leaf']=true;
            }
        }
        //数据以json格式返回到前端
        return json($data);
    }

更多相关文章

随机推荐