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级联动的数据,并且支持维护修改的。 于是自己做了一个。 代码非常简单,重要的符合这个格式的数据,这就是我这个懂后端程序员的优势了。
基于uniapp 开发的级联选择器,支持h5和小程序,支持配置选择样式、支持配置两级和三级,支持配置单选和多选
适用于element-plus 的 Cascader三级联动地区选择---json数据,
如下图这样把操作按钮放在select弹层底部是一种挺常见的设计方式 但是很遗憾element-ui没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定...li class=el-cascader-node styl
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器,用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
主要介绍了el-select数据过多懒加载的解决(loadmore),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
如下图这样把操作按钮放在 select 弹层底部是一种挺常见的设计方式 但是很遗憾 element-ui 没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定的!...li class=el-cascader-nod
二次封装的el-image-viewer组件,具有移动端双指缩放和单指拖拽功能。
实际上,el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框,Button 按钮,和最主要的Tree 树形控件写成!并非是在 element-ui 的穿梭框组件上的扩展,而仅仅是参照了其外观样式和功能。
全国省市区街道的json数据
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址(引用)传递,动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
需求: vue-cli项目树形控件:一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
在写一个功能时发现el-select支持多选,但是竟然不支持全选,好无语哦,那就自己实现一下吧~有两种方法,第二种感觉简单些 方法一:下拉项增加一个【全选】,然后应该有以下几种情况: 下拉选项全都勾选时,【全选...
省市级三级联动js脚本,数据回显整合代码