element-ui中 Cascader 级联选择器 动态加载

官网参考链接地址

第一步：添加 el-cascader 组件标签

<template>
  <div class="dashboard-container">
    <!-- test cascader -->
    <el-cascader :props="props" placeholder="请选择" />
  </div>
</template>

第二步：添加 props 属性

data() {
    return {
      props: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.lazyLoad
      }
    }
  },

第三步：写 lazyLoad 方法

methods: {
    // test
    lazyLoad(node, resolve) {
      setTimeout(() => {
        this.getProvence(node, resolve)
      }, 1000)
    },
    // test
    getProvence(node, resolve) {
      queryAuthorizedUnit({
        userId: JSON.parse(sessionStorage.userInfoLogin).yhid,
        unitCodeId: node.data ? node.data.value.split('/')[0] : '',
        startDate: '2019-9-12'
      }).then((json) => {
        if (Array.isArray(json.data.value)) {
          const nodes = json.data.value.map(item => ({
            value: item.concatdw, // 
            // value: item.dwdm,
            label: item.dwmc,
            leaf: node.level >= 5 // 5层级
          }))
          resolve(nodes)
        } else {
          this.$message.error(json.data.value || json.data.error)
        }
      }).catch(error => this.$message.error(error))
    }
  }

注意：由于el-cascader 只有 value和label 可以设置 本例子中的需要绑定三个值 就通过 ‘/’ 拼接为一个值，赋给value 用的时候再拆开（.split(’/’)) 如下图所示：

思考

如何回显默认选中值 直接给值是可以的 通过动态加载中设置是不可以的 不知道为什么？？？

参考例子：
尝试了一个办法，将props放到created中赋值，可以解决回显问题
其中
this.api.getMedsciAddress是我请求数据的方法
this.result是我绑定的值

created() 
     this.props = {
            lazy: true,
            lazyLoad: (node,resolve) => {
                const { level } = node;
                this.api.getMedsciAddress({
                    levelType: level+1,
                    parentId: node.data ? node.data.value : null
                }).then(response => {
                    let nodes = response.data.map(item => {
                        return {
                            value: item.id,
                            label: item.name,
                            leaf: level >=2
                        }
                    })
                    resolve(nodes)
                })
            }
        }
        this.result = [110000, 110100, 110105]
    },