el-cascader 设置只能选择子级

在Element UI的`el-Cascader`组件中，如果你想限制用户只能选择某个节点的子级作为最终选择，你可以通过设置`props`属性来实现。特别是在`props`选项中，有一个名为`checkStrictly`的属性，它的默认值是`false`，当设置为`true`时，就会启用严格的父子级检查。

例如，在Vue组件中，你可以这样配置：

<template>
  <el-cascader
    :props="{
      checkStrictly: true,
      // 其他选项...
    }"
    v-model="selectedValue"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
    };
  },
  // ...其他生命周期函数和计算属性
};
</script>

在这个例子中，用户只能从当前选中的节点及其子级中选择，而不能选择父节点或其他非直接子级的节点。

相关问题

el-cascader 只能选择子级

el-cascader 只能选择子级的实现方法如下：

1. 隐藏父级的 checkbox，只显示子级的 checkbox。

.hide {
  .el-cascader-menu:first-of-type {
    .el-cascader-node {
      .el-checkbox {
        display: none;
      }
    }
  }
}

2. 实现多选模式下，同一父级下最多只能选中一个子级的级联选择器。

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="props"
    :checkStrictly="true"
    :multiple="true"
    @change="handleCascaderChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'parent1',
          label: 'Parent 1',
          children: [
            {
              value: 'child1',
              label: 'Child 1'
            },
            {
              value: 'child2',
              label: 'Child 2'
            }
          ]
        },
        {
          value: 'parent2',
          label: 'Parent 2',
          children: [
            {
              value: 'child3',
              label: 'Child 3'
            },
            {
              value: 'child4',
              label: 'Child 4'
            }
          ]
        }
      ],
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    handleCascaderChange(value) {
      // 只保留同一父级下的最后一个子级
      const filteredValue = value.filter((item, index, arr) => {
        const parentValue = item.slice(0, -1).join('/');
        const lastChildValue = item[item.length - 1];
        return !arr.some((v, i) => {
          if (i !== index) {
            const pValue = v.slice(0, -1).join('/');
            const lValue = v[v.length - 1];
            return parentValue === pValue && lastChildValue === lValue;
          }
          return false;
        });
      });
      this.selectedOptions = filteredValue;
    }
  }
};
</script>

el-cascader如何只选子级

### 关于 `el-cascader` 组件只选择子级选项的配置

为了使 `el-cascader` 组件仅允许选择最底层（即叶子节点），可以利用 `props` 属性中的 `checkStrictly` 和其他相关参数来控制这种行为。当设置 `checkStrictly: false` 时，默认情况下会强制父子节点之间的关联，这意味着只有选择了父节点才能继续选择其下的子节点；而如果希望严格限制只能选择最后一层，则应确保此值为默认状态，并通过指定 `leafOnly` 参数为 `true` 来进一步限定。

具体来说，在 Vue 中使用 Element UI 的 `el-cascader` 组件并实现上述功能的方式如下所示：

<template>
  <div>
    <!-- 使用 leafOnly 控制只能选择叶节点 -->
    <el-cascader 
      v-model="selectedOptions"
      :options="areaData"
      :props="{ expandTrigger: 'hover', leafOnly: true }" 
      clearable></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 存储已选地址
      areaData: []        // 地址数据源
    };
  },
};
</script>

这里的关键在于设置了 `props` 对象内的 `leafOnly` 属性为 `true`[^1]，这使得用户在操作该组件时无法直接选取非末端节点作为最终的选择项。此外，还指定了 `expandTrigger` 为 `'hover'` ，表示可以通过鼠标悬停展开下拉菜单而不是点击触发，但这部分不是必须的可以根据实际需求调整。

对于如何获取所选项目的标签显示，可以在模板内绑定事件监听器如 `@change="handleChange"` 并定义相应的方法处理逻辑，以便捕获到变化后的路径信息以及对应的文本描述[^2]。

最后需要注意的是，为了让整个级联选择过程更加顺畅且符合预期效果，应当保证传递给 `options` 属性的数据结构正确无误——特别是要确认每一层级对象内部包含有与 `label`, `value`, `children` 字段相匹配的实际键名，这样才能让框架正常解析并渲染出完整的树形列表[^3]。