Element UI 使用el-cascader级联选择器懒加载数据回显解决方案

问题分析

	1.通过获取后台已选中省市区id数组['id1','id2','id3']数据,把已选中id省市区名称回显示到级联选择器,不能回显出来 

在这里插入图片描述

解决方案

通过给el-cascader设置key属性,通过key值变化重新渲染el-cascader
[**网上大多都是这种方案**](https://blog.csdn.net/weixin_46857582/article/details/107125222)
	<el-cascader
		ref="cascader"
      :props="props"
      :key="key"// 设key属性让组件重新渲染,重新赋值values实现回显
      v-model="values"
    ></el-cascader>
<script>
  let id = 0;
  export default {
    data() {
      return {
      	keys: 0,
        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);
          }
        }
      };
    }
  },
  method() {
  	handle() {
  		// 方案
  		this.keys++
  	}	
  }
</script>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐