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

一、单选

       1、问题：

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

       2、方法

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

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

        2、代码如下：

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

js通单选