Element中的Cascader(级联列表)动态加载省\市\区数据的方法


Posted in Javascript onMarch 27, 2019

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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
canvas实现钟表效果
Feb 13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Node.js 多线程完全指南总结
Mar 27 #Javascript
浅谈JS和jQuery的区别
Mar 27 #jQuery
Nginx设置为Node.js的前端服务器方法总结
Mar 27 #Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 #Javascript
详解vue在项目中使用百度地图
Mar 26 #Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
vue进入页面时滚动条始终在底部代码实例
Mar 26 #Javascript
You might like
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Python matplotlib可视化实例解析
2020/06/01 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
结婚典礼证婚词
2014/01/08 职场文书
导师推荐信范文
2014/05/09 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python