元素中的Cascader(级联列表)动态加载省\市\区数据的方法

元素中的扬料器其实是有动态加载次级选项的方法。

方法的原理是利用址（引用)传递，动态修改：选项。

var c={ name : ' bob ' } var d=CD。名=‘汤姆’控制台。log(c)/{ name : ' Tom ' } http://element-CN。eleme。io/#/zh-CN/component/cascader #东台-家-在-词-集-轩-象

其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。

怎么找了？

当然只能递归了。

简化一下大致思路：

var a=[ { value: '2 '，children: [ { value: '2-1 '，children 3360[{ value : ' 2-1-1 '，children: []，}，]，}，{ value: '2-2 '，children :[{ value : ' 2-2-1 '，children 33:[]，}，{ value 3333: ' 2-2 '，children那么我们就需要通过b找到a所在的位置。

a[0].儿童[1]。子项[0]{ value: '2-2-1 '，子项： [],},然后再赋值：

a[0].儿童[1]。儿童[0]。children=[{value: '2-2-1-1 '，children: []}]console.log(a)编写功能：

findRegionOption(regionOptions，regionArr) { if (_).isEmpty(regionArr) || _ .isEmpty(regionOptions)){返回null }让regionId=_ .第一个(地区)让regionOption=_ .find(regionOptions，regionOption={ return regionOption。value===regionId })if(！regionOption) {返回null }让tailRegionArr=_ .tail(regionArr) //lodash的尾巴方法，获取除了排列数组第一个元素以外的全部元素if (_ .isEmpty(tailRegionArr)){ return regionOption }返回这个。查找区域选项(区域选项。儿童，TailRegionarArr)}动态加载数据：

loadRegionChild(regionIdArr){ let regionOptions=this。regionhiera让regionoption inui=this。find regionoption(regionOptions，regionIdArr) if(！regionOptionInUI ||！地区选项。儿童| | regionoptioninui。孩子们。长度0){返回null }让regionKey=_ .最后一个(regionIdArr) if(！regionKey) { return null } api .getRegionHiera(regionKey).然后(RES={ let regionHiera=RES . data regionoption inui。children=regionchildren transformed/动态加载赋值})}整个页面代码大致就是：

模板div El-cascader : options=' regionHiera ' v-model=' selected region ' change on-select//div/template script导出默认值{ name : ' Test '，data(){ return { selected region :[]，regionHiera :[{ label : ' Malaysia '，value: '136 '，children 33:[]，{ label: ' Indonesia '，value: ' 106 '，children中华人民共和国，value: '100000 '，children: [] }，{ label: '，value: '244 '，children: [] }，]，} }，watch : { selected region(NV){ this。loadregionchild(NV)}，}，方法： { find regionoption(regionOptions，regionArr) { if (_).isEmpty(regionArr) || _ .isEmpty(regionOptions)){返回null }让regionId=_ .第一个(地区)让regionOption=_ .find(regionOptions，regionOption={ return regionOption。value===regionId })if(！regionOption) {返回null }让tailRegionArr=_ .tail(regionArr) if (_ .isEmpty(tailRegionArr)){ return regionOption }返回这个。查找区域选项(区域选项。children，tailRegionArr) }，loadRegionChild(regionIdArr){ let regionOptions=this。regionhiera让regionOption inui=this。如果(！regionOptionInUI ||！地区选项。儿童| | regionoptioninui。孩子们。长度0){返回null }让regionKey=_ .最后一个(regionIdArr) if(！regionKey) { return null } api .getRegionHiera(regionKey).然后(res={ let regionHiera=res.data //后台返回数据地区选项。children=regionchildtransformed })}，}}/script整体思路还是找到点击后的区域，然后动态赋值给儿童。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。