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 事件流和事件绑定
Jul 16 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JavaScript实现点击图片换背景
Nov 20 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判断一个数组是否为有序的方法
2015/03/27 PHP
PHP多态代码实例
2015/06/26 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
感恩节活动策划方案
2014/05/16 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
党员发展大会主持词
2015/07/03 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS