Element中的Cascader（级联列表）动态加载省／市／区数据

JinB 发布于2019-08-23 16:25 / 2740人阅读

摘要：中的其实是有动态加载次级选项的方法。方法的原理是利用址引用传递，动态修改。其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。格式化数据格式返回清除方法

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
    })
}

整个页面代码大致就是：

整体思路还是找到点击后的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;
}

GPU云服务器云服务器 html省市动态数据级联异步通过省加载城市动态加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103010.html

Element中的Cascader（级联列表）动态加载省／市／区数据

摘要：中的其实是有动态加载次级选项的方法。方法的原理是利用址引用传递，动态修改。其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。 element中的cascader其实是有动态加载次级选项的方法。方法的原理是利用址（引用）传递，动态修改:options。 var c={name: bob} var d=c d.name = tom console.log(c) // {name: to...

golden_hamster 2019-08-02 16:08 评论0 收藏0
Element中的Cascader（级联列表）动态加载省／市／区数据

摘要：中的其实是有动态加载次级选项的方法。方法的原理是利用址引用传递，动态修改。其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。格式化数据格式返回清除方法 element中的cascader其实是有动态加载次级选项的方法。方法的原理是利用址（引用）传递，动态修改:options。 var c={name: bob} var d=c d.name = tom console.log(c)...

fxp 2019-08-30 15:43 评论0 收藏0
从零开始实现一个Vue级联组件

摘要：从零开始实现一个级联组件本文实现级联组件需要用到自定义指令和组件通信相关知识，最好先阅读以下两篇文章自定义指令组件基础与通信一组件简介本文实现的是一个省市县多级联动组件，当组件渲染完成后默认会加载出所有的省名称，当用户点击某个省的名称后，右从零开始实现一个Vue级联组件本文实现级联组件需要用到自定义指令和组件通信相关知识，最好先阅读以下两篇文章: Vue自定义指令 Vue组件基础与...

binaryTree 2019-08-26 14:05 评论0 收藏0
如何实现一个这样的级联组件

摘要：封装组件系列文章如何实现一个这样的级联组件组件背景根据产品原型实现一个级联组件，下面看演示图应用场景很多，如后台管理系统，旅游系统，广告投放系统，营销系统等，现在流行，，三大框架，下面看看怎么使用实现实现逻辑产品经理的评审功能需求如下根据大 Vue封装组件系列文章如何实现一个这样的级联组件组件背景根据产品原型实现一个级联组件，下面看演示图 showImg(https://i.lo...

daydream 2019-08-26 10:11 评论0 收藏0
一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0