elementui中树形控件默认选中（不设置show-checkbox）

最新推荐文章于 2024-06-20 16:16:09 发布
最新推荐文章于 2024-06-20 16:16:09 发布
阅读量3k 收藏 3
点赞数 3
分类专栏： elementui 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42005992/article/details/109765614
版权 
<el-tree
	ref="tree"
	node-key="id"
	:data="deviceTree"
	:check-strictly="true"
	:props="defaultProps"
	:highlight-current="true"
	:expand-on-click-node="false"
   :default-expand-all="true"
	@node-click="handleNodeClick"
></el-tree>

this.$refs.tree.setCurrentKey(id) // id为deviceTree里面对应的id值

qq_2268846315
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element 树形2级表格，设置默认选中
qq_26841153的博客
09-16 959
element 树形2级表格，设置默认选中
el-tree没有复选框时，默认选中高亮节点并展开展开
n_2021的博客
06-08 1685
el-tree没有复选框时，默认选中高亮节点并展开展开——current-node-key和setCurrentKey方法同时使用才会达到效果
【elementui】el-tree开启show-checkbox，点击叶子节点触发勾选
最新发布
bbt953的博客
06-20 438
el-tree开启show-checkbox，点击叶子节点触发勾选
vue Element UI树的手动点击选中（非checkbox选中）
Zack_ZXY的博客
12-29 4958
element数形组件提供手动checkbox选中   有时候我们希望，手动设置树上的选中样式，类似于这种：     直接上源码： // 手动点击选中树节点（非checkbox选中） export function manualClickChecked(theTree, manualNode, alwaysExpand) { var store = theTree.store ...
elementui的表格或者树形控件默认选中并且高亮
weixin_72915158的博客
08-22 353
使用nexttick。
element-ui tree组件点击父节点默认选中第一个子节点。
weixin_52137696的博客
12-16 8427
element-ui tree组件点击父节点默认选中第一个子节点。
elementUI Tree 树形控件的官方使用文档
10-17
ElementUI Tree 树形控件是前端开发中常用的一种组件，它用于展示具有层次结构的数据，通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点，以便更好地管理和查看数据。在本文中，...
CheckBox控件默认选中,提交时永远获得选中状态的实现代码
10-22
对于CheckBox控件，如果数据库中相应的字段值为"true"，则将`CheckBox`的`Checked`属性设置为`true`，从而实现默认选中的效果。 值得注意的是，`CheckBoxBind`方法被放置在`!this.Page.IsPostBack`的判断下，这意味...
ng-repeat中Checkbox默认选中的方法教程
10-18
在这个特定的教程中，我们关注的是如何在`ng-repeat`循环中处理Checkbox控件，并使它们在初始状态下根据数据源的值设置为选中状态。 首先，我们有一个ASP.NET MVC的后台数据模型，包含一个名为`Car`的类，该类有两...
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于... node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss 在样式表中包含以
关于element-ui el-tree 无复选框（CheckBox）时获取当前选中id，及手动选中高亮
qq_36094686的博客
08-19 789
关于element-ui el-tree 无CheckBox时获取当前选中id this.$refs.tree.currentNode.node.id 手动赋值选中 this.$refs.tree.setCurrentKey(id) 当无法赋值时，可使用 this.$nextTick(() => { this.$refs.tree.setCurrentKey(id) }) ...
el-tree没有复选框时，选中、高亮、定位功能的实现
qq_37485170的博客
06-16 281
​ 机缘 在使用无选择框的el-tree时遇到的一个问题，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。 这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能，其中定位功能涉及到无论当前在那个菜单，删除某一项菜单后，刷新菜单会跳到全部，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的...
element解决树结构默认选中踩坑记录
强颜欢笑
07-22 9414
element解决树结构默认选中踩坑记录 碰到的一个离奇问题 tree这个组件子数据明明没有全部选中结果树结构的子节点，却显示全部选中了节点，后来发现是因为父节点的id出现了就默认子节点全部选中，所以就不能再用default-checked-keys这个属性。改为默认提供的原型链setCheckedKeys方法。 下面晒方法 引用的组件 <el-tree :data="data" ...
Element-Plus 中 ElTree 默认选中视图不更新选中状态问题
weixin_44326492的博客
09-15 958
el-tree 默认选中状态视图更新问题
ElementUi tree树指定节点是否显示复选框（父节点不显示复选框）
小太阳的博客
05-11 8490
场景：只有子节点有复选框，父节点没有复选框，如图 打开控制台，发现只有子节点样式名有isleaf 所以修改样式代码 // 不可全选样式 .el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .el-checkbox .el-checkbox__inner { display: none; } }
vue elementui tree-select组件
lgplrcode的博客
11-19 973
<template> <el-select ref="selectTree" v-model="value" :placeholder="placeholder" v-bind="$attrs" clearable @remove-tag="removeTag" > <el-option value="" /> <el-tree ref="treeOption" :sho
element UI中的el-tree根据后台数据动态生成树形checkbox，点击提交获取绑定checked项以及实现显示默认checked项
qq_45959912的博客
01-28 2035
<el-tree ref="tree" :data="menuList" show-checkbox node-key="id" accordion :default-checked-keys="selectedID" :props="permissionProps" @check="checkedList" > </el-tree>
element-ui tree 树形控件复选框实现单选
热门推荐
qq_38468358的博客
05-23 1万+
项目开发中在使用到 tree 树形控件实现单选功能，element-ui 官方给出来复选事件，并没有单选操作，自己就研究了一下，代码如下： 1、template 代码中： <el-tree :data="treeData" :props="defaultProps" node-key="id" ref="treeForm" show-che...
el-tree没有复选框时，选中、currentNodeKey高亮、定位、刷新后保留展开状态功能的实现
qq_37485170的博客
06-13 4418
使用无选择框的el-tree时，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。el-tree没有复选框时，选中、高亮、定位、刷新后保留展开状态功能的实 vue2+elementUI的el-tree的选中、高亮、定位功能，其中定位功能涉及到无论当前在那个菜单，删除某一项菜单后，刷新菜单会跳到全部:current-node-key="currentNodeKey" ----> 设置初始选中的值:highlight-current="true" ----> 设置高亮 必须写
element ui tree 树形控件添加节点过滤和show-checkbox后，过滤节点后如何控制只能选择到可见节点
06-06
在 Element UI 的 Tree 树形控件中，可以结合使用过滤和 show-checkbox 属性来实现节点过滤和只能选择可见节点的效果。具体实现步骤如下： 1. 设置 Tree 组件的 filter-node-method 属性，这个属性可以指定一个过滤方法，用于过滤不需要显示的节点。例如： ```html <template> <el-tree :data="data" :filter-node-method="filterNode" :show-checkbox="true" @check-change="handleCheckChange" ></el-tree> </template> <script> export default { data() { return { data: [ // 树形数据 ] } }, methods: { filterNode(value, data) { // 过滤节点的方法 // value 为搜索框中输入的值 // data 为当前节点的数据对象 // 返回 true 表示需要显示节点，返回 false 表示不需要显示节点 return data.label.indexOf(value) !== -1; }, handleCheckChange(data, checked) { // 处理节点选中事件 // data 为选中节点的数据对象 // checked 为选中状态，true 为选中，false 为取消选中 } } } </script> ``` 上面的代码中，我们设置了 filter-node-method 属性为 filterNode 方法。这个方法会在过滤节点时被调用，我们在这个方法中通过判断当前节点的 label 是否包含搜索框中输入的值来决定节点是否需要显示。 2. 在 handleCheckChange 方法中，需要判断当前选中的节点是否可见。如果节点不可见，则需要取消选中它。例如： ```javascript handleCheckChange(data, checked) { const node = this.$refs.tree.getNode(data.key); // 获取当前节点的 DOM 元素 if (node && !node.offsetParent) { // 如果节点不可见，则取消选中它 this.$refs.tree.setChecked(data.key, false); } } ``` 上面的代码中，我们首先通过 this.$refs.tree.getNode(data.key) 方法获取当前节点的 DOM 元素，然后判断这个元素的 offsetParent 属性是否为 null。如果为 null，说明节点不可见，我们就通过 this.$refs.tree.setChecked(data.key, false) 方法取消选中它。 通过上面的实现，我们就可以实现节点过滤和只能选择可见节点的效果了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值