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与flash交互通信基础教程
Aug 07 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 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数据库操作面向对象的优点
2006/10/09 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue.js实现只弹一次弹框
2018/01/29 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
公司营业员的工作总结自我评价
2013/10/05 职场文书
写好自荐信的要点
2013/11/06 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
活动总结书
2014/05/08 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
公司市场部岗位职责
2015/04/15 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android