el-cascader组件实现动态加载省市县数据的简单记录
需求简述:
项目中编辑页面有个籍贯的表单,点击时需要通过接口依次获取省、市、县的数据。elementUI中有现成的级联组件:el-cascader。
问题:
如何实现动态获取数据?
代码如下:
组件代码:
<el-form-item label="籍贯" prop="a22">
<el-cascader style="width: 100%" clearable
v-model="cinaPLForm.a22"
placeholder="请选择籍贯"
:key="'a22'+flgNum"
v-if="dataModel.a22Key == cinaPLForm.id+'a22'"
:options="a22Options"
:props="props"
:show-all-levels="false"
@expand-change="expandChangeA22">
</el-cascader>
</el-form-item>
其中v-model="cinaPLForm.a22"是绑定变量; :options="a22Options"是存储省市县数据的; :props="props"是对数据的对应处理;:show-all-levels="false" 我这里不需要显示全路径,只需要显示最后一级的名字即可;@expand-change="expandChangeA22" 实现点击后获取下一级别的数据。
js代码摘要如下:
<script>
export default {
data() {
return {
flgNum:0,
areaDicTypes:["DD_ZONE_PROVINCE","DD_ZONE_CITY","DD_ZONE_COUNTRY","DD_ZONE_TOWN"],
a22Options: [], // 籍贯
props: {
value: 'id',
label:'text'
},
//接口获取的编辑页面信息
cinaPLForm:{
a22: []
}
}
},
methods: {
init (item) {
this.cinaPLForm.a22 = []; //先初始化为[],否则在a22有值并且再次打开同记录的该界面会报level为null的js错误
this.flgNum ++;
this.$nextTick(() => {
//重置数据
this.resetData();
// //初始化省份数据
let typeJson = {"uniqIde":this.areaDicTypes[0],"par":""};
findDictsAndBack(typeJson,this,'proDataCallBack');
})
},
resetData(){
this.resetForm('cinaPLForm');
this.a22Options = [];
},
//重置查询条件
resetForm (formName) {
this.$refs[formName].resetFields();
},
//省级数据回调函数
proDataCallBack(resProData,callData){
resProData.map(item=>{
this.$set(item,'children',[])
})
this.a22Options = resProData;
this.hkdzOptions = resProData;
this.xzzOptions = resProData;
//获取信息
this.getCinaPLForm();
},
//市级数据回调函数
cityDataCallBack(resCityData,callData){
let _this = this;
let callCityData = callData.callData;
let optionName = callData.opName;
resCityData.map(item=>{
this.$set(item,'children',[])
})
let tempProData = JSON.parse(JSON.stringify(_this[optionName]));
let inxPro = tempProData.map((item) => item.id).indexOf(callCityData[0]);
tempProData[inxPro].children = resCityData;
_this[optionName] = tempProData;
if(callCityData.length > 2){
let typeJson = {"uniqIde":this.areaDicTypes[2],"par":callCityData[1]};
let optionName = callData.opName;
if(optionName == "a22Options"){
findDictsAndBack(typeJson,this,'countyA22DataCallBack',callData);
}else{
findDictsAndBack(typeJson,this,'countyDataCallBack',callData);
}
}
},
//县级a22数据回调函数
countyA22DataCallBack(resCountyData,callData){
let _this = this;
let callCountyData = callData.callData;
let optionName = callData.opName;
let tempData = JSON.parse(JSON.stringify(_this[optionName]));
let inxPro = tempData.map((item) => item.id).indexOf(callCountyData[0]);
let inxCity = tempData[inxPro].children.map((item) => item.id).indexOf(callCountyData[1]);
tempData[inxPro].children[inxCity].children = resCountyData;
_this[optionName] = tempData;
},
//籍贯地区级联组件点击展示时触发事件
expandChangeA22(v1){
if(v1.length < 3){
this.getAreasData(v1,"a22Options");
}
},
getAreasData(vArr,opName){
let _this = this;
let areaCode = "";
let levelStr = 0;
let par = "";
if(vArr.length > 0){
areaCode = vArr[vArr.length-1];
par = areaCode;
levelStr = vArr.length;
}
let uniqIde = _this.areaDicTypes[levelStr]; // DD_ZONE_PROVINCE DD_ZONE_CITY DD_ZONE_COUNTRY DD_ZONE_TOWN
let typeJson = {"uniqIde":uniqIde,"par":par};
if(vArr.length == 1){
findDictsAndBack(typeJson,this,'cityDataCallBack',{callData:vArr,opName:opName});
}else if(vArr.length == 2){
findDictsAndBack(typeJson,this,'countyDataCallBack',{callData:vArr,opName:opName});
}else if(vArr.length = 3){
findDictsAndBack(typeJson,this,'townDataCallBack',{callData:vArr,opName:opName});
}
},
getCinaPLForm(){
//其中接口返回后,对a22数据的处理:
if(!(caseInfo.a22 == null || !caseInfo.a22)){
let intA22ProCode = (caseInfo.a22.substr(0,2)+"0000000000");
let intA22CityCode = (caseInfo.a22.substr(0,4)+"00000000");
let tempA22Arr = [intA22ProCode,intA22CityCode,caseInfo.a22]
_this.cinaPLForm.a22 = tempA22Arr;
let typeJson = {"uniqIde":this.areaDicTypes[1],"par":intA22ProCode};
findDictsAndBack(typeJson,this,'cityDataCallBack',{callData:tempA22Arr,opName:"a22Options"});
}else{
_this.cinaPLForm.a22 = [];
}
}
}
:key+v-if+js代码中的初始化赋值a22为[],可解决不同操作打开页面的level为null的bug。
}
</script>
附父页面打开本页面时的js代码摘要:
viewHandle (item,sourceType) {
item.a22Key = item.id+"a22";
this.$nextTick(() => {
this.$refs.cinaPatientAndFlowView.init(item)
})
},
相关推荐
今天找到了大半天,没找到合适的 vue el-cascader 省市区街道4级联动的数据,并且支持维护修改的。 于是自己做了一个。 代码非常简单,重要的符合这个格式的数据,这就是我这个懂后端程序员的优势了。
全国省市区街道的json数据
对于大数据量的级联选择,uniapp-cascader会智能地只加载可视范围内的选项,减少内存占用,提高应用的响应速度,从而提升用户体验。 6. **fmui-cascader**: 压缩包中的"fmui-cascader"可能是一个针对uniapp-...
2. **配置Cascader组件**:在模板中,添加`<el-cascader>`元素,并设置其`options`属性为`areas`,以加载我们的地区数据。还可以根据需求设置其他属性,如`props`(指定各个字段名)、`clearable`(是否可清除选择)...
总之,el-select组件数据过多时的懒加载解决方案,通过分页加载数据和监听滚动事件来动态渲染el-select的内容,可以有效解决大量数据导致的性能问题,并提供更加流畅的用户交互体验。在实现时,需要注意数据同步和...
实现el-cascader组件点击文字即选中效果
如下图这样把操作按钮放在select弹层底部是一种挺常见的设计方式 但是很遗憾element-ui没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定...li class=el-cascader-node styl
最后,为了在页面上使用Cascader组件并实现动态加载,我们需要在Vue实例的模板中设置`<el-cascader>`组件,通过`props`属性指定`options`初始数据,并在`on-change`事件中调用`loadRegionChild`函数,这样每次用户...
然而,在实际使用过程中,可能会遇到一些问题,比如Select下拉选项(el-option)在页面滚动时超出元素区域,以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器,用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
在 Vue 实例中,当组件加载后,需要从数据源中获取菜单数据,并将其传递给 el-menu 组件。由于使用了递归组件,因此需要定义一个递归组件的参数(例如,命名为 recursive-menu),并在 el-menu 组件中通过 slot...
通过上述内容,我们可以了解到,Element UI 的 el-tree 组件在实现动态加载、新增和更新节点方面提供了灵活的操作方式,同时也展示了如何结合其他组件和数据处理逻辑来完成树形控件的丰富交互功能。开发者在学习这些...
如下图这样把操作按钮放在 select 弹层底部是一种挺常见的设计方式 但是很遗憾 element-ui 没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定的!...li class=el-cascader-nod
二次封装的el-image-viewer组件,具有移动端双指缩放和单指拖拽功能。
"element-ui 的 el-button 组件中添加自定义颜色和图标的实现方法" 在 Element UI 中,el-button 组件是非常常用的一个组件,但是默认情况下,它的颜色和图标都有限制。如果我们想要添加自定义的颜色和图标,该如何...
实际上,el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框,Button 按钮,和最主要的Tree 树形控件写成!并非是在 element-ui 的穿梭框组件上的扩展,而仅仅是参照了其外观样式和功能。
在给定的文件中,展示了如何利用Element UI库来封装`el-table`和`el-form`组件,这两个组件在管理系统的界面中非常常见,特别是用于数据展示和表单提交。 首先,我们关注`el-form`组件的封装。`el-form`用于创建...