欢迎访问我的个人博客 |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通单选