Element中的Cascader（級聯列表）動態加載省／市／區數據

element中的cascader實際上是有動態加載次級選項的方法。
方法的原理是利用址（引用）傳遞，動態修改:options。

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

http://element-cn.eleme.io/#/...

其中找到究竟須要在那層添加數據就變成一個很麻煩的問題。
怎麼找了？
固然只能遞歸了。

簡化一下大體思路：

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 => {
      regionOptionInUI.children = res.data
    })
}

整個頁面代碼大體就是：

<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 => {
          regionOptionInUI.children = res.data  //後臺返回數據
        })
    },
   }
}
</script>

總體思路仍是找到點擊後的region，而後動態賦值給children。
寫的有點亂，但願有幫助吧。

PS：其中用到的 _.XXX 引入的lodash的庫

再附一個方吧，若是後臺返回的數據不符合組件的數據類型（children、label、value），能夠使用該方法。

/**
* 格式化Region數據格式
* @param []  
* @return [] // 返回清除listener方法 
*/
function transRegion(regionInfo) {
 if (!regionInfo) {
   return null;
 }

 let regionId = regionInfo.regionId;
 let regionName = regionInfo.name;
 let children = _.map(regionInfo.children, child => {
   return transRegion(child);
 });

 var res = {
   label: regionName,
   value: regionId,
   children: children
 };
 return res;
}