antdesginVue TreeSelect 树选择只能选中子节点 父节点不能选中

在使用 Ant Design Vue 的 TreeSelect 组件时，如果你想要实现只能选中子节点而不能选中父节点的功能，你可以通过设置 treeCheckable 属性为 true 并且使用 checkStrictly 属性来确保父节点不能被选中。

以下是一个简单的实例代码：

<template>
  <a-tree-select
    v-model="value"
    style="width: 200px"
    :tree-data="treeData"
    tree-checkable
    :show-checked-strictly="true"
    placeholder="Please select"
  />
</template>
 
<script>
export default {
  data() {
    return {
      value: undefined,
      treeData: [
        {
          title: 'parent 1',
          value: 'parent 1',
          children: [
            {
              title: 'child 1',
              value: 'child 1',
            },
            {
              title: 'child 2',
              value: 'child 2',
            },
          ],
        },
        {
          title: 'parent 2',
          value: 'parent 2',
          children: [
            {
              title: 'child 3',
              value: 'child 3',
            },
            {
              title: 'child 4',
              value: 'child 4',
            },
          ],
        },
      ],
    };
  },
};
</script>

在这个例子中，treeCheckable 设置为 true 允许选中子节点，而 show-checked-strictly 设置为 true 确保父节点不会被选中。当你选择一个子节点时，它会被选中，而父节点不会。