Element中如何使用Cascader动态加载省\市\区数据-创新互联

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

佳县ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

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

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

怎么找了？

当然只能递归了。

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

简化一下大致思路：

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 // 动态加载赋值
  })
}

整个页面代码大致就是：

<template>
 <div>
   <el-cascader :options="regionHiera" v-model="selectedRegion" change-on-select/>
 </div>
</template>

<script>
export default {
 name: 'Test',
 data() {
  return {
   selectedRegion: [],
   regionHiera: [
    { label: 'Malaysia', value: '136', children: [] },
    { label: 'Indonesia', value: '106', children: [] },
    { label: '中华人民共和国', value: '100000', children: [] },
    { label: 'United States', value: '244', children: [] },
   ],
  }
 },
 watch: {
  selectedRegion(nv) {
   this.loadRegionChild(nv)
  },
 },
  methods: {
   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)
   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
    })
  },
  }
}
</script>

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

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：Element中如何使用Cascader动态加载省\市\区数据-创新互联
转载源于：https://www.cdcxhl.com/article32/dojjsc.html

成都网站建设公司_创新互联，为您提供自适应网站、网站策划、网站导航、ChatGPT、关键词优化、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容