博客

官方的demo

<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>

思路就是level就是层级关系，0就是1级列表，再将获取到的数组定义为value和label，再将leaf设为false。然后将获取到的数据回调给方法resolve。最后node里面的value就是你选择的所有value的数组了。

注意 ：最后一级设为true就不会继续加载了 而是回显到上面的选择框上。

下面看真实的demo

<el-form-item label="关联区域代码" label-width="120px">
          <el-cascader v-model="form.areaCode" :props="props"></el-cascader>
        </el-form-item>

引入获取省市区镇的列表的接口方法。

import { getProvinceList, getCityList, getCountyList, getTownList } from '@/api/area';

export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          if (level == 0) {
            getProvinceList().then((res) => {
              if (res.code == 200) {
                var data = res.data;
                var nodes = data.map(item => {
                  return {
                    value: item.code,
                    label: item.name,
                    leaf: false
                  };
                });
                resolve(nodes);
              }
            })
          } else if (level == 1) {
            getCityList(node.value).then((res) => {
              if (res.code == 200) {
                var data = res.data;
                var nodes = data.map(item => {
                  return {
                    value: item.code,
                    label: item.name,
                    leaf: false
                  };
                });
                resolve(nodes);
              }
            })
          } else if (level == 2) {
            getCountyList(node.value).then((res) => {
              if (res.code == 200) {
                var data = res.data;
                var nodes = data.map(item => {
                  return {
                    value: item.code,
                    label: item.name,
                    leaf: false
                  };
                });
                resolve(nodes);
              }
            })
          } else if (level == 3) {
            getTownList(node.value).then((res) => {
              if (res.code == 200) {
                var data = res.data;
                var nodes = data.map(item => {
                  return {
                    value: item.code,
                    label: item.name,
                    leaf: true
                  };
                });
                resolve(nodes);
              }
            })
          }
        },
      }
    }
  },
  mounted() {

  },
  methods: {
    
  }
}

效果如下：