treeselect只选了分支节点全选_vue Treeselect下拉树只能选择第N级元素实现代码

你可以通过设置 `flattenSearchResults` 属性来实现只能选择第N级元素的需求。具体实现方法如下：

首先，在 `treeselect` 标签中设置 `flattenSearchResults` 为 `true`，这样搜索结果将会以扁平化的形式展示出来。

然后，通过在 `treeselect` 标签中设置 `normalizer` 属性来控制每个选项的级别。`normalizer` 是一个函数，它将每个选项的原始数据转换为一个对象，该对象包含 `id`、`label` 和 `level` 三个属性。

最后，你可以通过设置 `showCount` 属性来展示每个选项的子节点数量。这样用户就可以根据子节点数量来判断每个选项的级别。

以下是一个示例代码：

<template>
  <div>
    <treeselect
      v-model="selectedNodes"
      :options="options"
      :flatten-search-results="true"
      :normalizer="normalize"
      :show-count="true"
      placeholder="请选择"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedNodes: [],
      options: [
        {
          id: 1,
          label: '第一级元素',
          children: [
            {
              id: 2,
              label: '第二级元素',
              children: [
                {
                  id: 3,
                  label: '第三级元素',
                  children: [
                    {
                      id: 4,
                      label: '第四级元素'
                    },
                    {
                      id: 5,
                      label: '第四级元素'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    normalize(node) {
      return {
        id: node.id,
        label: node.label,
        level: this.getLevel(node)
      }
    },
    getLevel(node) {
      let level = 0
      while (node.parent) {
        level++
        node = node.parent
      }
      return level
    }
  }
}
</script>

在上面的示例代码中，我们通过 `normalizer` 函数将每个选项的原始数据转换为一个包含 `id`、`label` 和 `level` 三个属性的对象。`level` 属性表示每个选项的级别。

然后，我们使用 `getLevel` 函数来计算每个选项的级别。该函数使用一个 `while` 循环来计算选项的父级数量，从而确定选项的级别。

最后，我们将 `flattenSearchResults` 属性设置为 `true`，将 `normalizer` 属性设置为我们定义的 `normalize` 函数，将 `showCount` 属性设置为 `true`，这样就可以实现只能选择第 N 级元素的需求。