vue-treeselect 父级也可选

### 实现 Vue-Treeselect 父级选项可选

为了使 `vue-treeselect` 的父级选项也能够被选择，在初始化组件时需设置特定属性。默认情况下，`vue-treeselect` 只允许叶子节点作为有效选项。通过调整配置项可以改变这一行为。

#### 配置参数说明

- **normalizer**: 这是一个函数，用于自定义处理每个节点的数据。可以通过此函数来控制哪些节点应该被认为是可选的[^1]。

// main.js 中引入样式文件
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

#### 修改 normalizer 函数

为了让父级节点也能成为有效的选择项，可以在创建 treeselect 组件实例的时候传递一个 customNormalizer 方法给 props.normalizer 属性：

<template>
  <div id="app">
    <!-- 使用 :normalizer 来指定如何规范化数据 -->
    <vue-treeselect
      v-model="value"
      :multiple="true"
      :options="options"
      :normalizer="customNormalizer"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { id: 'a', label: 'A', children: [] },
        { id: 'b', label: 'B', isDisabled: true, children: [{ id: 'd', label: 'D' }] }
      ]
    };
  },
  methods: {
    // 自定义正常化器逻辑
    customNormalizer(node) {
      const result = Object.assign({}, node);
      
      delete result.children; // 移除子节点以防止无限嵌套
      
      return result;
    }
  }
};
</script>

上述代码片段展示了如何利用 `normalizer` 参数来自定义节点的表现形式，并移除了所有节点下的 `children` 字段使得它们都变成叶节点从而可以直接选取[^2]。

对于性能优化方面，考虑到提到的大约900KB大小的数据集以及加载时间较长的问题，建议考虑分页加载或懒加载的方式减少一次性渲染的压力。另外也可以尝试虚拟滚动技术提高列表展示效率[^3]。