Element中如何使用Cascader动态加载省\市\区数据

这篇文章将为大家详细讲解有关Element中如何使用Cascader动态加载省\市\区数据，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联专业为企业提供沧县网站建设、沧县做网站、沧县网站设计、沧县网站制作等企业网站建设、网页设计与制作、沧县企业网站模板建站服务，10余年沧县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

element中的cascader其实是有动态加载次级选项的方法。

方法的原理是利用址（引用）传递，动态修改:options。

var c={name: 'bob'}
var d=c
d.name = 'tom'
console.log(c)
// {name: "tom"}

http://element-cn.eleme.io/#/zh-CN/component/cascader#dong-tai-jia-zai-ci-ji-xuan-xiang

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

怎么找了？

当然只能递归了。

简化一下大致思路：

var a = [
 {
  value: '2',
  children: [
   {
    value: '2-1',
    children: [
     {
      value: '2-1-1',
      children: [],
     },
    ],
   },
   {
    value: '2-2',
    children: [
     {
      value: '2-2-1',
      children: [],
     },
     {
      value: '2-2-2',
      children: [
       {
        value: '2-2-2-1',
        children: [],
       },
      ],
     },
    ],
   },
  ],
 },
]
var b = ['2','2-2','2-2-1']

那么我们就需要通过b找到a所在的位置。

a[0].children[1].children[0]

{
  value: '2-2-1',
  children: [],
 },

然后再赋值:

a[0].children[1].children[0].children = [{value: '2-2-1-1',children: []}]

console.log(a)

编写function：

findRegionOption(regionOptions, regionArr) {
   if (_.isEmpty(regionArr) || _.isEmpty(regionOptions)) {
    return null
   }

   let regionId = _.first(regionArr)
   let regionOption = _.find(regionOptions, regionOption => {
    return regionOption.value === regionId
   })
   
   if (!regionOption) {
    return null
   }
   
   let tailRegionArr = _.tail(regionArr) // lodash的tail方法，获取除了array数组第一个元素以外的全部元素。

   if (_.isEmpty(tailRegionArr)) {
    return regionOption
   }
   return this.findRegionOption(regionOption.children, tailRegionArr)
}

动态加载数据：

loadRegionChild(regionIdArr) {
 let regionOptions = this.regionHiera
 let regionOptionInUI = this.findRegionOption(regionOptions, regionIdArr)
 if (
  !regionOptionInUI ||
  !regionOptionInUI.children ||
  regionOptionInUI.children.length > 0
 ) {
  return null
 }

 let regionKey = _.last(regionIdArr)
 if (!regionKey) {
  return null
 }

 api
  .getRegionHiera(regionKey)
  .then(res => {
   let regionHiera = res.data
   regionOptionInUI.children = regionChildrenTransfomed // 动态加载赋值
  })
}

整个页面代码大致就是：

整体思路还是找到点击后的region，然后动态赋值给children。

关于“Element中如何使用Cascader动态加载省\市\区数据”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。