vue-element联级列表使用懒加载

在这里插入图片描述

html

       <el-form-item class="formitem" label="旅居地区:" prop="livingArea1">
                <el-cascader
                  v-if="!isljdz"
                  clearable
                  style="width:90%"
                  placeholder="可搜索地区"
                  v-model="hightemporaryform.livingArea1"
                  :props="props"
                  filterable
                  @change="handleChange"
                  ref="cascader01"
                ></el-cascader>
                <el-input
                  v-if="isljdz"
                  style="width:90%"
                  v-model="hightemporaryform.livingArea1"
                  @focus="lddddd"
                ></el-input>
              </el-form-item>

data

  props: {
        lazy: true,
        lazyLoad(node, resolve) {
          console.log("htp", http);

          const { level } = node;
          console.log(node);

          if (node.level == 0) {
            if ("string" == typeof cities) {
              cities = JSON.parse(cities);
            }
            const nodes = cities.map(item => ({
              value: item.value,
              label: item.label
            }));
            console.log("nodes0", nodes);

            resolve(nodes);
          }
          if (node.level != 0) {
            console.log("node", node);
            let formm = { label: node.data.value };
            http({
              method: "post",
              url: `/ohealth/api/v1/system/common/subList`,
              data: formm
            })
              .then(function(response) {
                console.log("老方法", response.data.data);

                let nodes02 = response.data.data;
                const nodesee = nodes02.map(item => ({
                  value: item.value,
                  label: item.label,
                  leaf: item.leaf == 3
                }));
                console.log("leve2", nodes02);

                resolve(nodesee);
              })
              .catch(function(error) {});
          }
        }
      },

js

目的传字符串

 // 户籍地
    handleChange02(value, label) {
      this.hightemporaryform.householdPlace = this.$refs.cascader02
        .getCheckedNodes()[0]
        .pathLabels.toString("/");
      this.hightemporaryform.householdPlace = this.hightemporaryform.householdPlace.replaceAll(
        ",",
        ""
      );
      this.hightemporaryform.householdPlaceCode = this.$refs.cascader02.getCheckedNodes()[0].value;
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-element-admin qiankun是将vue-element-admin框架与qiankun微前端框架相结合的方案。 vue-element-admin是一个基于Vue.js和Element UI的前端框架,它提供了一套完整的后台管理系统解决方案,包括登录、权限管理、数据展示等功能。它使用Vue的单文件组件的开发方式,使得代码结构清晰,并且提供了丰富的组件和插件,大大加快了开发速度。同时,它还使用Element UI组件库,样式美观且易于使用。 而qiankun是一个基于微前端架构的开源框架,能够帮助我们将多个独立的前端应用整合到一个统一的页面中。它具有独立性、解耦性和可复用性等特点,可以将不同的前端应用打包成独立的子应用,再通过qiankun的主应用进行管理和展示。 将vue-element-admin与qiankun相结合,可以实现在一个页面中同时展示多个vue-element-admin的实例。这样做的好处是可以将不同模块的前端开发团队独立进行开发和维护,提高开发效率和代码的复用性,同时能够实现整体页面的动态切换和加载,提升用户体验。在使用过程中,qiankun提供了一些API和生命周期钩子函数,方便我们进行子应用之间的通信和数据共享。 总之,vue-element-admin qiankun是将两个优秀的前端框架相结合,能够提供更强大的前端开发和管理能力,可以应对更加复杂的项目需求,提升开发效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值