elementui el-cascader 异步加载及防止重复加载

使用el-cascader当数据量过大时，推荐使用异步加载机制，异步加载的好处也不用多说，当异步加载时，可能相同操作会重复从后台读取资源，占用资源不说，也对不起异步的初衷，其实很简单，判断绑定options是否加载过即可；

change-on-select差异

在做项目的过程中，el-cascader的使用有两种情况，一种是只能选择到最后一级，一种是可以选择任何一级，即change-on-select的区别，这两种情况会有一些方法上的差别

首先第一种（change-on-select = false）页面如下：

<el-cascader 
    :props="zrbzProps"
    @active-item-change="handleWzjbChange"
    :options="wzjbOptions"
    v-model="addWtdjForm.wzjb">
</el-cascader>

定义数据格式如下：

wzjbOptions:[],
zrbzProps: {
           value: 'value',
           children: 'bzs'
       },
// 初始加载数据
getSelectWzdjData:function() {
        this.$http.post(this.selectWblxUrl,
                {xmcj: "1"},
                {emulateJSON:true}).then(function (response) {
                    var handItems = response.body.data;
                    this.wzjbOptions = handItems.map( (v,i) => {
                        /*
                        * 因为获取el-cascader的lable比较麻烦，所以在此将需要用到的数据都放到value里，
                        * 需要的时候截取就行了
                        */                  
                        var current_id  = i + "--" + v.khxmbm + "--" +v.khxmmc;
                        if(当有后代数据时){
                            return {
                                         label: v.khxmmc,
                                         value: current_id,
                                         bzs: []
                                     }
                        }else{
                            return {
                                          label: v.khxmmc,
                                          value: current_id 
                                        }
                        }

                          });
                });
},
handleWzjbChange: function(val) {
        var parent =  "this.wzjbOptions";
        /*
         * 循环val.获取到当前点击的对象，之后先判断当前对象是否有子集，
         * 如果有子集说明已经加载过数据，则不需要加载数据
         */ 
        val.forEach(function(v,i) {
                var current_index = v.split("--")[0];
                parent += "["+current_index+"].bzs" ;
            })
        var parentArr = eval(parent);
        if(parentArr.length != 0){
            console.log("不需要查询");
            return;
        }
        /*
         * 获取点击的组织机构id,并作为参数传到后台.val的给格式:[0---id,1---id]
         * 其中,0,1代表每列的下标.id为实际的id
         */ 
        var param_sjzzjg = val[val.length-1].split("--");
        this.$http.post(this.selectWblxUrl,
                {sjkhxm:param_sjzzjg[1]},
                {emulateJSON:true}).then(function (res) {
                    var handItems = res.body.data;
                    // 最新列的值
                    var newdzs  =  handItems.map((vv , i )=> {
                            var current_id  = i + "--" + vv.khxmbm + "--" +vv.khxmmc;
                            //当有后代时
                            if(vv.sfyxj  >  0){
                                //选中该标签后.value为返回值,将当前值的下标与结果组合到一期返给调用对象
                                return {
                                    label: vv.khxmmc,
                                    value: current_id,
                                    bzs:[]
                                    }
                            }else{
                                return {
                                    label: vv.khxmmc,
                                    value: vv.khxmbm + "--"+ vv.khxmmc
                                }
                            }
                    });

                    if(newdzs.length != 0){
                        eval (parent+" = "+JSON.stringify(newdzs)) ;
                    }                           
                    }, function (response) {
                });
},

另一种（change-on-select = true）页面如下：

 <el-cascader 
            :props="zrbzProps" 
            change-on-select 
            @change="handleItemChange"
            :options="bzItems"
            v-model="addWtdjForm.zrbz">
</el-cascader>

定义数据格式如下：

bzItems:[],
zrbzProps: {
            value: 'value',
            children: 'bzs'
    },
// 班组下拉选
getBzList:function(){
                this.$http.post(this.selectBzUrl,
                        {zzjglx:"zzjg_lx_cd"},
                        {emulateJSON:true}).then(function (res) {
                            var handItems=res.body.data;
                            this.bzItems = handItems.map( (v,i) => {
                                var current_id  = i + "--" + v.id + "--" +v.zzjgmc;
                                //因为肯定会有第二级，所以bzs可以写死
                                return {
                                  label: v.zzjgmc,
                                  value: current_id,
                                  bzs: []
                                }
                              })

                        }, function (response) {
                        });
},

// 班组下拉选变更
handleItemChange: function(val) {
                var parent =  "this.bzItems";
                /*
                * 循环val.获取到当前点击的对象，之后先判断当前对象是否有子集，
                * 如果有子集说明已经加载过数据，则不需要加载数据
                */
                val.forEach(function(v,i) {
                    var current_index = v.split("--")[0];
                    parent += "["+current_index+"].bzs" ;
                });
                var parentArr = eval(parent);
                //**此处不一致**
                if(parentArr == undefined || parentArr.length != 0){
                    console.log("不需要查询");
                    return;
                }
                /*
                * 获取点击的组织机构id,并作为参数传到后台.val的给格式
                * [0---id,1---id].其中,0,1代表每列的下标.id为实际的id
                */
                var param_sjzzjg = val[val.length-1].split("--");
                this.$http.post(this.selectBzUrl,
                    {sjzzjg:param_sjzzjg[1]},
                    {emulateJSON:true}).then(function (res) {
                        var handItems =res.body.data;
                        // 最新列的值
                        var newdzs  =  handItems.map((vv , i )=> {
                            var current_id  = i + "--" + vv.id + "--" +vv.zzjgmc;
                            if(vv.sfyxj > 0){
                               //选中该标签后.value为返回值,将当前值的下标与结果组合到一期返给调用对象
                               return {
                                    label: vv.zzjgmc,
                                    value: current_id,
                                    bzs:[]
                                 }
                            }else{
                               return {
                                    label: vv.zzjgmc,
                                    value: current_id
                                 }
                            }
                       });
                        if(newdzs.length != 0){
                            eval (parent+" = "+JSON.stringify(newdzs)) ;
                        }
                    }, function (response) {
                });

}

两种使用方式如上，处理逻辑都是一致的；