element cascader组件动态加载数据

最近碰到一个需要动态加载不同数据的联动功能，但是element官方给的例子比较抽象，所以花了一点时间摸索了一番，为避免下次踩坑，故记录下来。

代码示例如下：

           </template><el-form-itemlabel="道路名称1：":prop="'crossList.' + index + '.roadId1'":rules="{required: true,message: '请选择道路名称',trigger: 'change',}"><el-cascaderv-model="item.roadId1":props="cascaderProps":options="areaList"placeholder="请选择"filterable:show-all-levels="false"@change="roadChange(index, 1)"></el-cascader></el-form-item></template>data() {return { cascaderProps: {lazy: true,emitPath: false,lazyLoad: this.lazyLoad,value: "roadId",label: "areaName",},
}methods:{// 加载动态数据的方法，仅在 lazy 为 true 时有效lazyLoad(node, resolve) {console.log(node);if (node.level == 1) {const nodes = this.roadList.filter((i) => node.data.areaCode == i.areaCode).map((item) => ({roadId: item.id,areaName: item.roadName,//这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上leaf: node.level >= 1,}));// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(nodes);}},// 道路名称选择时添加道路类型roadLevel1，roadLevel2字段roadChange(index, i) {var crossIndex = this.addForm.crossList[index];if (i == 1) {if (crossIndex.roadId1) {crossIndex.roadLevel1 = this.roadList.filter((item) => item.id == crossIndex.roadId1)[0].roadLevel;crossIndex.roadName1 = this.roadList.filter((item) => item.id == crossIndex.roadId1)[0].roadName;}} else {if (crossIndex.roadId2) {crossIndex.roadLevel2 = this.roadList.filter((item) => item.id == crossIndex.roadId2)[0].roadLevel;crossIndex.roadName2 = this.roadList.filter((item) => item.id == crossIndex.roadId2)[0].roadName;}}if (crossIndex.roadId1 && crossIndex.roadId2) {let url = CONSTANT.CROSSROADS.GETNAME;this.$axios.get(`${url}?roadId1=${crossIndex.roadId1}&roadId2=${crossIndex.roadId2}`).then((res) => {if (res.data.code == "0") {crossIndex.crossroadsName = res.data.data;} else {this.$message.error(res.data.msg);}});}},
}

时间有限，先写这么多，:prop="'crossList.' + index + '.roadId1'" 这里面的index是因为我的组件都是动态的列表。

element cascader组件动态加载数据相关推荐

微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...
cascader 动态加载回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
jqweui的picker动态加载数据
大家好,我是烤鸭: jqweui的picker动态加载数据 jqweui是jquery对weui的拓展开发,picker就是其中的一个拓展组件, 1. 先附上官网显示地址和代码: http:// ...
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...
iscroll动态加载数据完美解决方案
iscroll动态加载数据完美解决方案参考文章: (1)iscroll动态加载数据完美解决方案 (2)https://www.cnblogs.com/ShoneH/p/5253758.html (3 ...
如何在 InfoPath 2003 表单中动态加载数据
转自微软:http://support.microsoft.com/kb/896451/zh-cn 概要简介更多信息创建新的虚拟目录设计 Microsoft Office InfoPath 2 ...
ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table><tr><th styl ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...

element cascader组件动态加载数据

最近碰到一个需要动态加载不同数据的联动功能，但是element官方给的例子比较抽象，所以花了一点时间摸索了一番，为避免下次踩坑，故记录下来。

element cascader组件动态加载数据相关推荐

最新文章

热门文章