element el-cascader 动态加载次级选项，防止重复加载，异步请求三级数据

Element 作者： 大熊 2019年3月21日 10:39 14,029 浏览 32 评论

本篇文章解决的问题：

1，绑定事件@active-item-change点击后无反应

2，需要动态加载到第三级，官网例子只给了第二级，比如（省、市、区）（顶级分类、二级分类、三级分类）

3，已经加载过的数据防止重复加载

下面是代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
  <el-cascader :options="platOptions" @active-item-change="handleItemChange" :props="props"></el-cascader>
</template>
 
<script>
export default {
  data () {
    return {
      platOptions: [],
      props: {
        label: 'name',
        value: 'id',
        children: 'child'
      }
    }
  },
  methods: {
    getPlatCategory () {
      // 请求顶级分类
      this.$axios.get('/api/getCategory')
        .then(res => {
          if (res.status === 200) {
            this.platOptions = res.data.data
            this.platOptions.map((item, index, array) => {
              // 因为数组和对象更新后不会更新视图，这里必须用$set方法
              this.$set(array[index], 'child', [])
            })
          }
        }).catch(error => {
          let langmsg = this.$i18n.locale === 'zh' ? error.data.zhmsg : error.data.enmsg
          this.$message.error(langmsg)
        })
    },
    handleItemChange (value) {
      // 动态/异步加载分类数据
      let parentId
      if (value.length === 1) {
        // 如果点击的是一级分类
        parentId = value[0]
        this.platOptions.map((item, index) => {
          if (item.id === parentId && item.child.length === 0) {
            // 当顶级分类的的child为空时才请求数据
            this.$axios.get('/api/getCategorySon', {
              params: {
                parent_id: parentId
              }
            }).then(res => {
              if (res.status === 200) {
                this.$set(this.platOptions[index], 'child', res.data.data)
                item.child.map((innerItem, innerIndex) => {
                  // 二级分类下必须要设置一个空的child数组，不然点击@active-item-change没反应
                  this.$set(item.child[innerIndex], 'child', [])
                })
              }
            })
          }
        })
      } else {
        // 如果点击的是二级分类，则直接将三级分类绑定到platOptions
        parentId = value[1]
        this.platOptions.map((item, index) => {
          item.child.map((innerItem, innerIndex) => {
            if (innerItem.id === parentId && innerItem.child.length === 0) {
              // 当二级分类的的child为空时才请求一次数据
              this.$axios.get('/api/getCategorySon', {
                params: {
                  parent_id: parentId
                }
              }).then(res => {
                if (res.status === 200) {
                  this.$set(item.child[innerIndex], 'child', res.data.data)
                }
              })
            }
          })
        })
      }
    }
  }
}
</script>

欢迎留言，1小时内回复。

我已经用vue+element做过好几个大型项目，遇到过不少坑，希望能帮到有需要的人。

另外，这些博客上的视频教程真的对开发有不小的帮助，发出来的大部分我都已经看了，良心推荐

本站涉及到的资料教程资源免费提供，阅读全文即可获取下载地址
注：本站分享及资料仅供个人学习使用，禁止用于其他用途，因用户自身造成一切问题与本站无关!版权归原作者所有，本站不承担技术及版权问题，如有侵犯您的权益请联系我们删除
文章标签：

为您推荐

uniapp在线检查更新，进度条展示

Javascript视频教程

前端项目对网络url文件路径进行点击下载，而不是浏览器自动预览pdf, png

element DatePicker禁用日期

手把手制作mobileconfig文件，在iphone上创建h5网页桌面图标

Flutter ListTile – Flutter每周一组件

Flutter Inkwell – Flutter每周一组件

评论已关闭

32条评论

  1. 您好，为啥我的按照你这个区处理，在获取二级分类的时候报错；额 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher “options”: “TypeError: options.forEach is not a function”

    found in

  2. 您好！我正在用这个级联选择器做动态加载，但是遇到的问题是层级很多不知道多少级。我该怎么去做，想请教一下

        1. 我感觉像是因为数据更新导致了 ， 下拉菜单回收 ， 因为第二次点相同地区 ， 就不会出现这个问题

        2. 我感觉像是因为数据更新导致的 ， 下拉菜单回收 ， 因为第二次点相同地区 ， 就不会出现这个问题

          1. 你看下你的数据结构，如果你点击的项下面没有子分类，是会直接结束选择的，就是你说的菜单回收

      2. [
        {child: Array(0)
        code: 110000
        name: “北京市”
        },
        {child: Array(0)
        code: 120000
        name: “天津市”
        }
        ]
        这是一级的数据结构，有子类但是长度为0

          1. 那这不是一级一级请求的么 ， 不点击一级菜单 ， 就不会有二级菜单啊

          3. 不太明白 ，getPlatCategory这个函数是初始化的一级菜单的吧 ， 我能知道你的一级菜单初始化的之后数据结构是什么样子的么

          4. handleItemChange 这个函数里面的判断item.child.length === 0，如果子分类的长度不是0的话是不会请求数据的

          5. 谢谢楼主的回答啊 ， 虽然我还是不理解 ， 但是我用您的函数加上官网的例子给解决了 ，很感谢楼主的耐心回答。

          1. 不知道你有没有解决，我最近刚好遇到了这问题，需要在页面加载时，就获得完整的options，具体数据结构参考element官网

  6. 大神你好，element出了新版，cascader有了lazyload，能不能把这个代码改成新版的呢？现在这个似乎在新版运行有问题了。

      1. 使用lazyload，三级数据三个API完全没头绪，el的lazyload样例太简单了，大神能提供下思路吗

  9. 你好。关于级联器有个问题想问一下。
    我现在使用懒加载的方式加载了中国各个省市县区的数据。省一级的我是在json文件写死的然后加载；市、县区的是查询的数据库进行懒加载。
    需求：我想点击清空按钮后，他的目录只显示省一级的。或者直接干脆点，能不能把级联器销毁了重新创建一个。

    1. 这样做按我的思路来讲，是没有意义的啊
      我的懒加载是这样做的：
      1，请求过的数据放在缓存里面localstorage，没有请求到的没有数据, 每次点开一个新的二级，再往缓存里面塞数据
      如果要清空，你直接删除掉缓存的诗句，请求一级接口就可以