Vue中使用Element-ui实现省市县信息懒加载

最新推荐文章于 2023-05-21 17:50:36 发布

云影夜明

最新推荐文章于 2023-05-21 17:50:36 发布

阅读量596

点赞数 1

分类专栏：前端文章标签： vue.js ui elementui

本文链接：https://blog.youkuaiyun.com/a1092241852/article/details/122965490

版权

本文介绍如何在Vue项目中结合Element UI实现省市县数据的懒加载，通过data()初始化props值，确保信息按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item label="员工籍贯" prop="employeeNative">
          <el-cascader :props="props" v-model="form.employeeNative"></el-cascader>
        </el-form-item>

data()中设置props的值：

props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            console.log(node,level);
            if(level == 0){
              getProvinceInfo().then(list1 => {
                let arr = list1.data.map((e) => ({ value: e.id, label: e.name }));
                resolve(arr); // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              });
            }else if(level == 1){
              let { value } = node;
              getCityInfo(value).then(list2=>{
                let arr = list2.data.map((e) => ({ value: e.id, label: e.name  }));
                resolve(arr);
              });