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

整个页面代码大致就是：

<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。

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