Cascader 级联选择器只能选择人员(最后一级)

代码:

<el-cascader
    v-model="form.projectManagerId"
    :options="peooptions"
    :props="{
      label: 'label',
      value: 'id',
      children: 'children',
      emitPath: false,
    }"
    clearable
  ></el-cascader>

 我们发现,只要是最后一级,都能被选中,不符合我们的需求!!!


代码实现:

<el-cascader
    v-model="form.projectManagerId"
    :options="peooptions"
    :props="{
      checkStrictly: true,   //  父子节点不互相关联
      label: 'label',
      value: 'id',
      children: 'children',
      emitPath: false,
    }"
    clearable
  ></el-cascader>

通过在数据源中设置 disabled 字段来声明该选项是禁用的 :

// 拿到数据后
const recursionData = (arr) => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].nodeType != '3') {
            arr[i].disabled = true;
          }
          if (arr[i].children && arr[i].children.length) {
            recursionData(arr[i].children);
          }
        }
};
recursionData(this.peooptions);

相关推荐

  1. Element-UI中el-cascader选择获取label值

    2024-07-12 20:16:04       36 阅读
  2. VueTreeselect 选择节点

    2024-07-12 20:16:04       47 阅读
  3. vue 实现选择功能

    2024-07-12 20:16:04       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 20:16:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 20:16:04       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 20:16:04       58 阅读
  4. Python语言-面向对象

    2024-07-12 20:16:04       69 阅读

热门阅读

  1. git reset hard和soft的使用和区别

    2024-07-12 20:16:04       20 阅读
  2. 目前分布式光纤测温系统的主流架构有哪些?

    2024-07-12 20:16:04       20 阅读
  3. docker pull 报错:missing signature key,docker版本问题

    2024-07-12 20:16:04       18 阅读
  4. 第六篇:Python元组:不可变序列的魅力

    2024-07-12 20:16:04       19 阅读
  5. Linux rpm和ssh损坏修复

    2024-07-12 20:16:04       22 阅读
  6. 【cnocr的安装使用】

    2024-07-12 20:16:04       20 阅读