這篇文章將為大家詳細(xì)講解有關(guān)Element中如何使用Cascader動態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供滄縣網(wǎng)站建設(shè)、滄縣做網(wǎng)站、滄縣網(wǎng)站設(shè)計、滄縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、滄縣企業(yè)網(wǎng)站模板建站服務(wù)，10余年滄縣做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

element中的cascader其實是有動態(tài)加載次級選項的方法。

方法的原理是利用址（引用）傳遞，動態(tài)修改: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

其中找到究竟需要在那層添加數(shù)據(jù)就變成一個很麻煩的問題。

怎么找了？

當(dāng)然只能遞歸了。

簡化一下大致思路：

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數(shù)組第一個元素以外的全部元素。

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

動態(tài)加載數(shù)據(jù)：

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 // 動態(tài)加載賦值
  })
}

整個頁面代碼大致就是：

整體思路還是找到點擊后的region，然后動態(tài)賦值給children。

關(guān)于“Element中如何使用Cascader動態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。