vue-treeselect只能选择叶子节点，不能选中父节点

最新推荐文章于 2024-06-17 18:24:45 发布
最新推荐文章于 2024-06-17 18:24:45 发布
阅读量5k 收藏 9
点赞数 5
分类专栏： Vue 文章标签： vue-treeselect
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fd2025/article/details/125314073
版权

废话不说，直接上代码：

 <el-form-item label="归属公司" prop="custId">
              <treeselect
                v-model="form.custId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择归属公司"
                :disable-branch-nodes="true"
              />
            </el-form-item>

:disable-branch-nodes=“true”

半夏_2021
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
element 树选择+只能选择叶子节点
qq_42477147的博客
11-08 4936
<el-form-item label="" prop="acctItemTypeId"> <el-select ref="acctItemTypeId" v-model="formData.acctItemTypeId" style="width:100%" clearable placeholder="请选择" @clear="formData.acctItemTypeId =
VueTreeselect只能选择叶子节点（末级节点）
夏夏
11-26 3532
:disable-branch-nodes="true"
treeselect 禁用父节点后无法选择子节点的解决
最新发布
qq_31683775的博客
06-17 186
【代码】treeselect 禁用父节点后无法选择子节点的解决。
element-ui出的treeselect下拉树组件基本使用，以及只能选择叶子节点的功能，给节点添加按钮操作
weixin_63896561的博客
03-19 1498
disable-branch-nodes属性是禁用节点属性（针对需求1这个属性一定要设置，否则不生效）需求1：treeselect下拉树组件只能选择叶子节点，其他父节点均为点击展开功能（不选中）v-model绑定的值要设为null,不能设为'' ，否则会回显unknown。需要用到treeselect组件的插槽：slot="option-label"，插槽slot=“value-label” 是输入框回显的值，插槽slot=“option-label” 是下拉框的值，@select为选中某个节点时触发，
vue-treeselect只能选择叶子结点的属性
m0_69839414的博客
12-30 444
:disable-branch-nodes="true"
antd中treeSelect设置只选择叶子节点
飞翔的小白
03-29 3012
antd中treeSelect设置只选择叶子节点
antdvue树选择组件a-tree-select，只有叶子节点可以被选中
m0_68965080的博客
03-31 2789
【步骤】按步骤copy即可（vue2版本）【效果】只有叶子节点可以被选中。
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
10-14
在本文中，我们将深入探讨如何在Vue Treeselect中获取选中节点的ids和labels，这对于实现动态数据交互和展示用户选择至关重要。 首先，我们要了解Vue Treeselect提供的几个关键属性和事件： 1. `v-model`：这是Vue...
vue Treeselect下拉树只能选择第N级元素实现代码
10-14
本文将详细介绍如何在Vue中使用`vue-treeselect`组件，实现仅允许选择第N级元素的功能。`vue-treeselect`是一个强大的多级选择器，它提供了丰富的可配置选项来定制行为。 首先，我们要关注的是`isDisabled`属性。这...
vue-treeselect：具有对Vue.js的嵌套选项支持的多选组件
02-06
建议通过npm安装vue-treeselect，并使用类的捆绑器来构建您的应用程序。 npm install --save @riophae/vue-treeselect 本示例说明如何将vue-treeselect与集成在一起。 <!-- Vue SFC --> < t
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
使用“ Enter ”键选择选项，等等） 丰富的选项和高度可定制的支持多种浏览器（请参阅） RTL支持需要Vue 3.0+入门建议通过npm安装vue3-treeselect，并使用类的捆绑器来构建您的应用程序。 npm install --save vue3-...
下拉框实现树结构带禁用.vue
12-28
下拉框实现树结构带禁用.vue
vue-treeSelect:vue树状下拉组件
05-11
vue-treeSelect Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build 组件效果如下: ​ 如果能满足您的需求，麻烦爹妈给一个 ...
解决ant design vue使用tree select树选择器时父节点需要不可选中的问题
upStar1的博客
09-14 4720
在使用antv的tree select树选择器时，发现默认它的父节点是可以选中的。在用户使用的时候，很多时候是不需要选中的。所以我们只需要在给这个tree数组赋值的时候，给父节点赋selectable为false就可以了。查看了他的api发现一个属性selectable，默认为true。同理，如果需要禁用的话，直接disabled为true就可以。
vue设置treeselect 部门树下拉树根节点不可选
qq_22905801的博客
06-15 204
vue设置treeselect 部门树下拉树根节点不可选
vue+element-ui tree树形控件,没全选时，无法获取父ID
Rain's blog
02-13 2659
vue+element-ui tree树形控件,没全选时，无法获取父ID 使用element-ui tree树形控件的时候，在选择一个子节点后，使用getCheckedKeys 后，发现只能返回子节点的ID，但是其父节点ID没有返回。 Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()...
antdesginVue TreeSelect 树选择只能选中子节点 父节点不能选中
我只是个很菜的前端
10-09 6084
antdesginVue TreeSelect 树选择只能选中子节点 父节点不能选中
treeselect只选了分支节点全选_TreeSelect 树选择器如何使父节点不可选中，只能做展开收起功能...
weixin_42503036的博客
02-22 1100
Translation of this issue:TreeSelect tree selector how to make the parent node unselectable, can only do expansion function[] I have searched the issues of this repository and believe that this is not...
TreeView子节点选中同时选中所有父节点
weixin_30394981的博客
10-26 182
最近碰到过几次checkbox树操作，在winform中比较好容易操作，但在web页面在后台写代码的话，每次点击结点操作都会回发，这样导致用户体验很不好，这里在网上找了一段js代码： function setParentState(objNode) { var objParentDiv = WebForm_GetParentByTagName(objNode, "d...
vue-treeselect选择根节点默认不自动选叶子
06-10
对于vue-treeselect，如果您想选择根节点时不自动选中其子节点（即叶子节点），可以使用`flattenSearchResults`属性。将其设置为`true`将展开所有节点，并将所有节点平铺在搜索结果中，但不会自动选中叶子节点。在这种情况下，您需要根据需要手动选择节点。 以下是一个示例： ```html <template> <div> <treeselect v-model="value" :options="options" :flatten-search-results="true"></treeselect> </div> </template> <script> import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { components: { Treeselect }, data() { return { value: null, options: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1', children: [ { id: 3, label: 'Node 1-1-1' }, { id: 4, label: 'Node 1-1-2' } ] }, { id: 5, label: 'Node 1-2', children: [ { id: 6, label: 'Node 1-2-1' }, { id: 7, label: 'Node 1-2-2' } ] } ] } ] } } } </script> ``` 在上面的示例中，通过将`flatten-search-results`属性设置为`true`，可以展开所有节点并在搜索结果中显示它们，但不会自动选中叶子节点。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半夏_2021

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值