el-tree 选中节点同时选中checkbox

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量354 收藏 1
点赞数 1
分类专栏： VUE 控件 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlcsoft/article/details/132624880
版权

el-tree中，只要添加  :check-on-click-node="true"  属性即可

 <el-tree 
:show-checkbox="true" 
:check-on-click-node="true"    //选中节点同时选中checkbox
:check-strictly="true" 
:data="deptOptions"
                        
:props="defaultProps" 
:expand-on-click-node="false" 
:filter-node-method="filterNode" ref="tree"
 default-expand-all 
@node-click="handleNodeClick" 
@check="checkClick" />

wlcsoft
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于React。 用法 安装 使用您最喜欢的依赖项管理器安装库： yarn add react-checkbox-tree 使用npm： npm install react-checkbox-tree --save 注–此库使用了样式，并希望将它们加载到浏览器中。 包括CSS 为了方便起见，可以使用以下文件之一来使用库的样式： node_modules/react-checkbox-tree/lib/react-checkbox-tree.css node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss 在样式表中包含以
el-tree点击复选框后的文字也可选中节点
hahaha921的博客
06-08 1933
el-tree标签内加上:check-on-click-node此方法参考el-tree实现多选/父节点无勾选框/点击文字选中_一路追求匠人精神的博客-CSDN博客_el-tree实现多选搜索了很多方法只有这个博主的方法简单有效，其他都是要写多余的方法的...
elementplus el-tree如何获取当前节点的同级节点，并且自动勾选‘指定的选项‘
qq_45714050的博客
02-27 452
vue3 + elementplus 获取el-tree，当前节点同级节点数据、父节点数据、自动勾选同节点数据
el-tree 树增加全选按钮、点击文字时选中多选框
qq_28586135的博客
11-14 5647
el-tree 树增加全选按钮、点击文字时选中多选框
vue3+element-puls 自定义TreeSelect 树形选择多选
Jie0817的博客
06-30 3194
vue3+element-puls 自定义TreeSelect 树形选择
vue项目 -- element 表格添加多选框（禁用某一行），并且跨分页选择
weixin_55042716的博客
05-11 2625
需求： 在表格中，有个多选框，需要选择数据，但是跨分页后，之前点选的数据就没有了，现在需要做个保存 实现效果： 代码： <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKeys"> //指定row-key
el-tree显示复选框且单选（选择任意一节点）
湫__的博客
05-05 3419
vue3+el-tree 单选
element plus tree树形复选框
weixin_40412060的博客
09-05 1635
1.勾选子节点勾选其对应的父节点。
Vue3+Element-Plus中的Tree组件，多选时的赋值与取值
一念的博客
03-02 4263
el-tree 是 element-ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el-tree 组件提供了 getCheckedNodes 方法，可以用来获取树形结构中被选中的节点。
el-tree(element-plus)搜索树形菜单，并且带全选多选功能
yasuo56的博客
05-11 3533
el-tree(element-plus)搜索树形菜单，并且带全选多选功能
el-tree-transfer.rar
04-10
实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应...
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 441
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 232
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 542
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 433
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 301
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
elementui获取el-tree选中的节点Id
07-29
要获取 Element UI 中 el-tree 组件选中的节点的 ID，你可以使用以下方法： 1. 首先，给 el-tree 组件添加一个 ref 属性，例如：`ref="tree"`。 2. 在你的代码中，通过 `$refs` 对象引用该组件：`this.$refs.tree`。 3. 使用 `getCheckedNodes` 方法获取选中的节点数组，该方法返回一个包含选中节点的数组。 4. 遍历该数组，通过访问节点对象的 `id` 属性来获取节点的 ID。 下面是一个示例代码： ```vue <template> <el-tree ref="tree" :data="data" show-checkbox node-key="id" default-expand-all ></el-tree> </template> <script> export default { data() { return { data: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1' }, { id: 3, label: 'Node 1-2' }, ], }, { id: 4, label: 'Node 2', children: [ { id: 5, label: 'Node 2-1' }, { id: 6, label: 'Node 2-2' }, ], }, ], }; }, methods: { getSelectedNodeIds() { const checkedNodes = this.$refs.tree.getCheckedNodes(); const selectedNodeIds = checkedNodes.map(node => node.id); console.log(selectedNodeIds); }, }, }; </script> ``` 在上面的代码中，`getSelectedNodeIds` 方法会在控制台打印选中节点的 ID 数组。你可以根据自己的需求进行处理或进一步操作。记得在需要的地方调用 `getSelectedNodeIds` 方法获取选中节点的 ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值