解决el-cascader 点击单选按钮，但是不触发懒加载，调用展示下层接口

最新推荐文章于 2025-07-24 16:12:55 发布

原创最新推荐文章于 2025-07-24 16:12:55 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

文章介绍了在Vue中使用el-cascader组件实现级联选择器时，如何进行异步懒加载数据以及处理单选按钮点击不触发接口导致的问题。作者提供了`cascaderProps`配置和`gdTypeChange`方法示例。

 <el-form-item label="所属区域" prop="areaReqIds">
        <el-cascader
          :props="cascaderProps"
          v-model="queryParams.areaReqIds"
          style="width: 100%"
          popper-class="areaCascaderForm"
          @change="gdTypeChange('areaCascaderForm')"
          clearable
        ></el-cascader>
      </el-form-item>  


   cascaderPropsForm: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
          let regionParentId = "";
          if (level == 0) {
            regionParentId = 0;
          } else {
            regionParentId = node.data.value;
          }
          let res = await getOpsAreaList({ regionParentId: regionParentId });
          if (res.code == 200) {
            const nodes = res.data.map((item) => {
              return {
                value: item.id,
                label: item.regionName,
                leaf: item.hasChildren == 1 ? false : true,
              };
            });
            resolve(nodes);
          }
        },
      },

gdTypeChange(key) {
      // 为了解决点击级联的单选按钮但是有时并不会调用接口查询下级，但是下级页面展示无数据的问题
      this.$nextTick(() => {
        const dom = document
          .getElementsByClassName(key)[0]
          .getElementsByClassName("el-radio is-checked")[0];
        if (dom) {
          const brother = dom.nextElementSibling;
          brother.click();
        }
      });
    },