element UI Cascader 动态加载 lazyload 及回显

最新推荐文章于 2026-06-12 12:34:27 发布

原创最新推荐文章于 2026-06-12 12:34:27 发布 · 1.6w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

element 同时被 2 个专栏收录

2 篇文章

订阅专栏

cascader

1 篇文章

订阅专栏

本文详细介绍了如何在ElementUI的Cascader组件中实现动态加载数据的懒加载功能，通过设置props和使用getCheckedNodes()方法，可以有效地按需加载数据，提高应用性能。文章还提供了获取选中节点中文值的方法。

element UI Cascader 动态加载 lazyload

页面

在这里插入图片描述

回显: 使用 :placeholder属性(完美避过嘻嘻)

在这里插入图片描述

数据: 一级省要给初始默认值: options

在这里插入图片描述

懒加载: lazy: true, leaf 为true 结束节点, element 提供的 props 中的属性和方法

data是个函数注意调用方法时的 this指向

在这里插入图片描述

观察值的变化 , 下面的函数可以监听获取节点ID&&中文值

在这里插入图片描述

获取中文值 label

 this.$refs['invoice'].getCheckedNodes()[0].parent.parent.label  //省
        this.$refs['invoice'].getCheckedNodes()[0].parent.label //市
        this.$refs['invoice'].getCheckedNodes()[0].label //区

  props: {
        value: 'area_id',
        label: 'name',
        lazy: true,
        lazyLoad(node, resolve) {
          const level = node.level
          if (level === 1) {
            const id = node.value
            _self.$apis.user.getArea({ parent_id: id }).then(res => {
              const { code, msg } = res
              const { list } = res.data
              if (code === 0) {
                const nodes = list
                resolve(nodes)
              } else {
                this.$message.error(msg)
              }
            })
          } else if (level == 2) {
            console.log(node.level)
            const id = node.value
            _self.$apis.user.getArea({ parent_id: id }).then(res => {
              const { code, msg } = res
              const { list } = res.data
              if (code === 0) {
                const nodes = list
                nodes.forEach(item => {
                  item.leaf = level >= 2
                })
                resolve(nodes)
              }
            })
          }
        }
      }