使用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) {
});
}
两种使用方式如上,处理逻辑都是一致的;