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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
jQuery 性能优化指南 (1)
May 21 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
vue组件生命周期详解
Nov 07 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
Javascript Promise用法详解
May 10 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
操作Oracle的php类
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP解析RSS的方法
2015/03/05 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
js使用递归解析xml
2014/12/12 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
对Django外键关系的描述
2019/07/26 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
工程售后服务方案
2014/06/08 职场文书
合作协议书格式
2014/08/19 职场文书
小学六一主持词开场白
2015/05/28 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书