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 this调用规则说明
Mar 08 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
vue插件实现v-model功能
Sep 10 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
vue与django集成打包的实现方法
Nov 11 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP引用的调用方法分析
2016/04/25 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
pandas表连接 索引上的合并方法
2018/06/08 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
六行python代码的爱心曲线详解
2019/05/17 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python实现疫情地图可视化
2021/02/05 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
自荐书范文
2013/12/08 职场文书
24岁生日感言
2014/01/13 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书