el-cascader判断有子级展示多选框

el-cascader组件可以通过设置`show-all-levels`属性来判断是否展示多选框。当`show-all-levels`属性为`true`时，无论当前节点是否有子级，都会展示多选框。当`show-all-levels`属性为`false`时，只有当前节点有子级时才会展示多选框。

以下是一个示例代码：

<el-cascader style="width: 100%" :options="twoDatas" :props="twoProps" collapse-tags clearable filterable v-model="twoinput" @change="selectHandle" :show-all-levels="true"></el-cascader>

在上述代码中，`show-all-levels`属性被设置为`true`，因此el-cascader组件会展示多选框，无论当前节点是否有子级。

相关问题

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只传子级的id

el-cascader 组件是一个级联选择器，它的 value 值是一个数组，包含所有已选中的节点的值。如果只想传子级的 id，那么可以在 el-cascader 的 change 事件中处理一下，从最后一个选中的节点开始，逐级获取子级的 id，直到根节点为止。

以下是一个示例代码：

<template>
  <el-cascader
    v-model="selectedIds"
    :options="options"
    @change="handleChange"
    :props="{ value: 'id', label: 'name' }"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          name: '节点 1',
          children: [
            {
              id: 2,
              name: '节点 1-1',
              children: [
                {
                  id: 3,
                  name: '节点 1-1-1'
                },
                {
                  id: 4,
                  name: '节点 1-1-2'
                }
              ]
            },
            {
              id: 5,
              name: '节点 1-2'
            }
          ]
        },
        {
          id: 6,
          name: '节点 2',
          children: [
            {
              id: 7,
              name: '节点 2-1'
            },
            {
              id: 8,
              name: '节点 2-2'
            }
          ]
        }
      ],
      selectedIds: []
    }
  },
  methods: {
    handleChange(selectedValues) {
      const selectedIds = []
      let options = this.options

      for (let i = 0; i < selectedValues.length; i++) {
        const selectedValue = selectedValues[i]
        const selectedOption = options.find(option => option.id === selectedValue)
        selectedIds.push(selectedOption.id)
        options = selectedOption.children
      }

      this.$emit('select', selectedIds)
    }
  }
}
</script>

在上面的示例中，我们在 el-cascader 的 change 事件中获取所有已选择节点的值（即 selectedValues），然后逐个查找对应的选项对象，并将其 id 添加到 selectedIds 数组中。最后，我们将 selectedIds 作为参数触发一个自定义的 select 事件，供父组件使用。