el-cascader只让选择第四级，如果不到第四级则禁用

最新推荐文章于 2025-04-15 17:37:52 发布

风情，更与何人说

最新推荐文章于 2025-04-15 17:37:52 发布

阅读量1.3k

点赞数 3

文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.youkuaiyun.com/Shuai_YeYe/article/details/129685107

版权

文章讲述了如何在前端实现一个级联选择组件，确保用户只能选择到学校级别。关键在于通过后台接口获取数据后，对数据进行处理，禁用非学校的末级选项。使用的技术包括Vue的el-cascader组件，通过设置props和处理数据来达到目标效果。

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

1、先看一下要实现的效果
在这里插入图片描述
我想选择学校，如果末级不是学校则禁用，，实现只能选择学校
2、后台接口返回的数据格式

3、前端实现代码，因为区/县是一定存在的，只需判断他是否有子级并且层级为4，这个可根据你的后台返回数据进行适当调整

        <el-cascader
            v-model="form.deptId"
            :options="schoolIdOptions"
            :props="schoolIdProps"
            :style="{ width: '100%' }"
            placeholder="请选择学校"
            @change="schoolChange"
          ></el-cascader>
          
		schoolIdProps: {
        multiple: false,
        value: "id",
        label: "name",
        emitPath: false,//这个可以直接返回选中的值，不会返回数组，非常好用
        // checkStrictly: true // 可以选择任意一级
      },

// 获取学校树
    getActiveTree() {
      getActiveTree(1).then((response) => {
        let resDate = response.data;
        // 限制只能添加4级分类
        this.setDisable(4, resDate);
        //schoolIdOptions 是我层级联动绑定的值
        this.schoolIdOptions = resDate;
      });
    },
    
    /**
     * level: 当前层级
     * data: 当前层级的数据
     */
    setDisable(level, data) {
      let _this = this;
      data.forEach((v) => {
      //此处判断可根据你后台返回的数据类型适当变换，原理就是将不符合条件的项给禁掉
        if (!v.children && v.level == level) {
          v.disabled = true;
        } else {
          if (!v.children) {
            return;
          } else {
            _this.setDisable(level, v.children);
          }
        }
      });
    },