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: {
    // testlazyLoad(node, resolve) {
    setTimeout(() => {
    this.getProvence(node, resolve)}, 1000)},// testgetProvence(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]},