el-tree 实现单选

最新推荐文章于 2024-01-24 19:04:21 发布
原创 最新推荐文章于 2024-01-24 19:04:21 发布 · 479 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍如何使用 Element UI 的树形组件实现节点选择功能，包括如何响应节点检查事件，以及如何设置和清除选中状态。通过具体代码示例，展示了在 Vue.js 应用中对树形结构数据进行有效管理的方法。

 

<el-tree ref="tree" :data="prodList" show-checkbox node-key="label" :check-strictly="true" @check="onTreeCheck"> </el-tree>

onTreeCheck(node, tree) {

      if (tree.checkedKeys.length == 0) {

        this.$refs.tree.setCheckedKeys([])

      } else {

        this.$refs.tree.setCheckedKeys([])

        this.$refs.tree.setCheckedKeys([node.label])

      }

    },

el-tree实现只显示某一级复选框且单选
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
04-22 6982
其实这个东西做出来之后，还是蛮简单的啦。 先说一下实现的思路： 只显示某一级复选框：el-tree中提供了disabled属性，当咱们给某一个节点设置了disabled属性后，那么当前节点就禁用了，所以咱们找到添加disabled的节点复选框的类名，通过display:none隐藏掉就好了，这里我都已经找好了，贴在下面。 单选：大家都知道复选框都是多选的，但是需求总是不尽人意，非得单选才行呢，其实也不难。大家在选中之后，拿到当前选中的节点对象，然后重新设置下选中的节点（只设置当前选中的节点，即单选.
el-select嵌套el-tree实现多选或者单选
weixin_44763349的博客
01-28 4474
实现单选有两种方法 方法一 html片段 <el-select v-model="treeData" placeholder="请选择..." style="width: 16rem"> <el-option :value="treeDataValue" style="height: auto"> <el-tree ref="tree" :data="data" default-expand
elment-ui tree单选实现
01-03
elment-ui 里面的树形控件，默认是多选的，如果你仔细看过各个属性和方法就可以实现单选。 check-strictly 关闭父子关联 node-key 设置唯一标识 show-checkbox 允许节点可选 ref=“tree” 添加方法 @check=“treeChange” check方法： treeChange(now, tree) { this.$nextTick(() => { this.$refs.tree.setCheckedKeys([now.id], true); }); } 获取选中的节点key
TreeCRTL 树状控件的小程序
08-23
vc TreeCRTL 树状控件各种操作的小程序
el-tree 实现单选功能
热门推荐
JavaAndLI的博客
06-12 1万+
el-tree是不支持单选的，可以通过选中事件进行处理，实现单选 代码如下： <el-tree lazy :load="loadNodeTreeMyself" :props="defaultProps" :show-checkbox="true" //显示选择框 :check-on-click-node="true" //点击节点的时候选中节点 :check-strictly="true" //在显示复选框的情况下，严格的遵循父子不互相关联的做法
el-tree实现单选功能
Hay-Zero的博客
06-17 3177
关键配置 ： data 树形结构的数据 show-checkbox 显示复选框 ref 可以this.$refs.tree拿到此控件 node-key 给节点的编号 check-stricty 父、子节点之间没有关联【不写这个，选了父节点，会默认选择全部的子节点】 check 复选框选择、取消选择时触发的事件 <el-tree ref="tree" @check="handleCheck" :data="treeData" node-key="id"
精选资源
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
5. **API接口**：为了实现与后端数据的交互，el-tree-select可能提供了获取选中值、设置选中值等API接口，方便开发者在业务逻辑中使用。 6. **事件处理**：组件通常会触发一些事件，如节点选中、节点展开、节点加载...
精选资源
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree实现单选
最新发布
06-07
在Element UI库中，`el-tree`组件是一个用于渲染树形结构的数据列表，它可以方便地实现单选功能。如果你想让`el-tree`中的每个节点只能被选中一次，你可以结合`check-strictly`属性和`node-key`属性一起使用。 1. `...
el-tree单选
weixin_46971212的博客
10-14 495
<el-tree icon-class="el-icon-minus" :data="data" :props="defaultProps" show-checkbox node-key="Id" :check-strictly="true" default-expand-all ref="tree" @check-change="checkChangeTr.
el-tree树形列表实现单选效果
omroji的博客
01-24 2014
今天开发的时候遇到了这样一个业务需求：页面中有一个表示不同公司部门下的员工的树形列表，要求选择员工后录入表单主要负责人字段，因此需要实现el-tree的单选效果，但是el-tree自身并没有直接支持单选的属性，查阅了文档和其他博客后我找到了解决方法。
el-tree可选择中实现单选效果
hyq_07_27的博客
07-07 1496
【代码】el-tree可选择中实现单选效果。
el-tree的实现叶子节点单选
qq_50661854的博客
07-29 5500
Vue实现el-tree叶子节点单选
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值