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 相关文章推荐
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
ES6 Generator基本使用方法示例
Jun 06 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学习笔记(三)操作符与控制结构
2011/08/06 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php中apc缓存使用示例
2013/12/25 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python实现随机漫步功能
2018/07/09 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
房地产开盘策划方案
2014/02/10 职场文书
四年级评语大全
2014/04/21 职场文书
个人租房协议书样本
2014/10/01 职场文书
人事专员岗位职责
2015/02/03 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
小学体育组工作总结
2015/08/13 职场文书
给校长的建议书作文400字
2015/09/14 职场文书