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

最新推荐文章于 2024-05-30 16:01:07 发布

LifeFuture1994

最新推荐文章于 2024-05-30 16:01:07 发布

阅读量838

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Future1994/article/details/132364748

版权

 <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();
        }
      });
    },