Elementui cascader 级联选择器 动态加载数据,保存后回显的问题

问题描述

使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区

省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组,完全选不中,本来想下次回来给一个字符串在model里面的,但是也不现实

elementui 版本2.9.1

采用动态加载的方式

<el-cascader :props=”props”></el-cascader>

<script>
let id = 0;

export default {

data() {
  return {
    props: {
      lazy: true,
      lazyLoad (node, resolve) {
        const { level } = node;
        setTimeout(() => {
          const nodes = Array.from({ length: level + 1 })
            .map(item => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2
            }));
          // 通过调用resolve将子节点数据返回,通知组件数据加载完成
          resolve(nodes);
        }, 1000);
      }
    }
  };
}

};
</script>

回答:

目前只能加载完全部数据再设置默认值,如果是多个接口,做成省市区各级的所有数据,然后自己做数据整理,要么就做成一个嵌套的接口

回答:

https://codepen.io/hopekayo/p…

回答:

尝试了一个办法,将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]
    },

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注