vue-treeselect 【单选/多选】的时候只选择最后一层（绑定的值只绑定最后一层）

欢迎访问我的个人博客 ｜snows_l's BLOGhttp://snows-l.site

一、单选

       1、问题：

        vue-treeselect 单选的时候只选择最后一层（绑定的值只绑定最后一层）

       2、方法

        1、只需要加上  :disable-branch-nodes="true" 就行，官方解释为：禁用节点

                设置 disableBranchNodes: true 为使分支节点不可检查，并将其仅视为可折叠文件夹

        2、代码如下：

// template
<XTreeselect
  v-if="form.type == '2'"
  v-model="form.id"
  :options="versionList"
  :normalizer="tenantIdnormalizer"
  :disable-branch-nodes="true"
  @input="handleVersionChange"
  noOptionsText="暂无数据"
  placeholder="点击选择"
></XTreeselect>

js

// 整理后端数据给组件使用
tenantIdnormalizer(node) {
  if (node.child && !node.child.length) {
    delete node.children;
  }
  return {
    id: node.id || "0",
    label: node.name,
    children: node.child,
  };
},


// 改变的因需求而定  
handleVersionChange(val) {
  if (this.form.type == 1) {
    this.form.version = this.versionList.find(
      (item) => item.value == val
    ).label;
  } else {
    let arr = this.flattenTree(this.versionList, "child");
    let row = arr.find((item) => item.id == val);
    if (row) {
      this.form.version = row.name;
    }
  }
},

二、多选

       1、问题：

        vue-treeselect 多选的时候只选择最后一层（绑定的值只绑定最后一层）

       2、方法

        1、只需要加上  value-consists-of="LEAF_PRIORITY"  就行，官方解释为： 防止价值组合 

对于非固定和多选模式，如果选中了分支节点及其所有后代，则vue-treeselect会将它们组合到值数组中的单个项目中，如以下示例所示。通过使用valueConsistsOf道具，您可以更改该行为。该道具有四个选项：

• "ALL" - 选中的所有节点都将包含在 value 数组中
• "BRANCH_PRIORITY"（默认）-如果选中了分支节点，则其所有后代将被排除在value 数组之外
• "LEAF_PRIORITY" - 如果选中了分支节点，则此节点本身及其分支后代将从value阵列中排除，但其叶后代将包括在内
• "ALL_WITH_INDETERMINATE" -选中的任何节点将包括在value 数组中，另外还有不确定的节点

           2、代码图下

// template
<XTreeselect
  v-model="form.model"
  :multiple="true"
  :options="manufacturerModelList"
  value-consists-of="LEAF_PRIORITY"
  :normalizer="tenantIdnormalizer"
  noOptionsText="暂无数据"
  placeholder="点击选择"
></XTreeselect>

js通单选