element UI Cascader 动态加载 lazyload 及 回显

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)
              }
            })
          }
        }
      }