ElementUI cascader级联动态加载及回显

ElementUI cascader级联动态加载及回显

 

数据回显思路

1.https://blog.csdn.net/m0_52789121/article/details/123252327

2.使用回显插件
https://zhuanlan.zhihu.com/p/297914302

3.这个是最好的思路。启动vue2，安装element，直接运行下面的

<template>
  <!-- 测试懒加载 -->
  <el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader>
</template>

<script>
let id2 = 0;

export default {
  name: 'TestView',
  data() {
    return {
      test_options: [
        //回显值得关键必须要把需要回显的都写到options里面，且最后一项要加上leaf:true,表示无下级了才可以回显；这里写死，实际要根绝接口返回的需要回显的数据，来递归循环到结果，赋值给这里；
      ],
      test_model: ['选项1', '选项3'], //模拟后台取到的默认值，这里是单选
      test_props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: 2 }).map((item) => {
              ++id2;
              return {
                id: 1,
                value: `选项${id2}`,
                label: `选项${id2}`,
                leaf: level >= 1
              };
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        }
      }
    };
  },
  created() {
    setTimeout(() => {
      this.test_options = [
        {
          value: '选项1',
          label: '选项1',
          id: 2,
          leaf: false,
          children: [{ value: '选项3', label: '选项3', leaf: true }]
        },
        {
          value: '选项2',
          label: '选项2'
        }
      ];
    }, 20000);
  }
};
</script>