element UI Cascader 级联选择器动态加载次级选项

项目中有这样一个需求，省市区的选择，想到用到el-Cascader组件，动态加载次级选项。

现象

首先应获取所有的省，然后用户选择某个省，动态加载该省下所有的市。这个过程中数组某项被修改，视图未更新

<label>发出省市</label>
<el-cascader v-model="sendAddress" :options="provenceArray" @active-item-change="handleItemChange" :props="props">
</el-cascader>
复制代码

// data
provenceArray: [],
props:{label: 'areaName',value: 'areaId',children: 'cities'
},
复制代码

// ajax 获取省, 同时修改数组对象，每一项添加一个属性cities,并设置为空数组
getProvence() {$api.searchAreaInfo({parentId: 0}).then((res) => {this.provenceArray = res && res.data && res.data.data || []this.provenceArray.forEach((item,index)=>{this.provenceArray[index].cities = [] // 视图未更新// this.$set(this.provenceArray[index], 'cities', []) // right})})
}
复制代码

// 利用active-item-change事件，可以在用户点击某个省份时拉取该省份下的城市数据
handleItemChange(val) {let value = val[0]$api.searchAreaInfo({parentId: value}).then((res) => {let cities = res && res.data && res.data.data || []for(let i = 0; i < this.provenceArray.length; i++) {if(this.provenceArray[i].areaId === value) {this.provenceArray[index].cities = cities // 视图未更新// this.$set(this.provenceArray[i], 'cities', cities) // rightbreak;}}})
}
复制代码

原因

element UI Cascader 级联选择器动态加载次级选项相关推荐

cascader 动态加载回显_Elementui cascader 级联选择器动态加载数据，保存后回显的问题...
问题描述使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组, ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
elementui级联选择器懒加载回显亲测有效
记录一下自己挣扎迷茫的一天,如果有同样遇到级联选择器要回显的同志,希望你早点看到这篇日志.进入正题,如何在懒加载上回显. //组件上写法 <el-cascader:options="l ...
解决element 新版本cascader级联选择器的各种bug
第一个问题:下拉框高度过长导致部分内容看不见解决办法: 1.在浏览器中审查下拉框元素 2.在css中更改高度 .el-cascader-panel {height: 300px; } 第二个问题:圆 ...
element ui 中级联选择器，点击完下拉框收回
在el-cascader标签中添加ref属性,$refs中添加toggleDropDownVisible()方法
cascader 动态加载回显_Element中的Cascader（级联列表）动态加载省\市\区数据的方法...
element中的cascader其实是有动态加载次级选项的方法. 方法的原理是利用址(引用)传递,动态修改:options. var c={name: 'bob'} var d=c d.name = ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
Selenium一些特殊情况的处理：失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
Selenium一些特殊情况的处理失去焦点focus 有时候click()或者send_keys(),没有反应.那是因为失去了焦点.使用driver. switch_to_active_elemen ...
cascader 动态加载回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...

element UI Cascader 级联选择器动态加载次级选项

现象

原因

element UI Cascader 级联选择器动态加载次级选项相关推荐

最新文章

热门文章

element UI Cascader 级联选择器 动态加载次级选项

现象

原因

element UI Cascader 级联选择器 动态加载次级选项相关推荐

最新文章

热门文章

element UI Cascader 级联选择器动态加载次级选项

element UI Cascader 级联选择器动态加载次级选项相关推荐