elementUI Tree 树形控件单选实现

这篇具有很好参考价值的文章主要介绍了elementUI Tree 树形控件单选实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

elementpus 树形控件如何变为单选,el-element,elementui,前端,javascript


在Element UI中,树形控件(el-tree)本身不支持单选功能。但是,你可以通过监听节点点击事件并手动更新选中状态来实现单选树。

以下是一个简单的例子,展示了如何实现单选功能:

展示效果

elementpus 树形控件如何变为单选,el-element,elementui,前端,javascript

代码实现

html相关:

 <el-tree :data="flatArr" check-strictly accordion show-checkbox node-key="id" :props="defaultProps"
            @check="handleNodeClick" ref="tree">
 </el-tree>

js方法:

 handleNodeClick(data, node, self) {
      // 如果已经选中了一个节点,则取消选择
      if (this.currentNodeKey?.name && this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([]);
         // 更新当前选中节点的 key
        this.$refs.tree.setCheckedNodes([data]);
      }

      // 更新当前选中节点的 key
      this.currentNodeKey = data;
    },

义了一个currentNodeKey来存储当前选中节点的 key。每次点击节点时,我们首先检查是否已经有一个节点被选中,如果是,则通过this.$refs.tree.setCurrentKey(null)取消选中它。然后,我们更新currentNodeKey为新选中的节点 key。

请注意,这里的node.key假设你的每个节点数据中都有一个唯一的key属性。你需要根据实际的节点数据结构相应地调整这个属性名。

elementui Tree树形控件其他详细数据

参数 说明 类型 可选值 默认值
data 展示数据 array
empty-text 内容为空的时候展示的文本 String
node-key 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 String
props 配置选项,具体看下表 object
render-after-expand 是否在第一次展开某个树节点后才渲染其子节点 boolean true
load 加载子树数据的方法,仅当 lazy 属性为true 时生效 function(node, resolve)
render-content 树节点的内容区的渲染 Function Function(h, { node, data, store }
highlight-current 是否高亮当前选中节点,默认值是 false。 boolean false
default-expand-all 是否默认展开所有节点 boolean false
expand-on-click-node 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 boolean true
check-on-click-node 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。 boolean false
auto-expand-parent 展开子节点的时候是否自动展开父节点 boolean true
default-expanded-keys 默认展开的节点的 key 的数组 array
show-checkbox 节点是否可被选择 boolean false
check-strictly 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false boolean false
default-checked-keys 默认勾选的节点的 key 的数组 array
current-node-key 当前选中的节点 string, number
filter-node-method 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 Function(value, data, node)
accordion 是否每次只打开一个同级树节点展开 boolean false
indent 相邻级节点间的水平缩进,单位为像素 number 16
icon-class 自定义树节点的图标 string - -
lazy 是否懒加载子节点,需与 load 方法结合使用 boolean false
draggable 是否开启拖拽节点功能 boolean false
allow-drag 判断节点能否被拖拽 Function(node)
allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况:‘prev’、‘inner’ 和 ‘next’,分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 Function(draggingNode, dropNode, type)

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。文章来源地址https://www.toymoban.com/news/detail-843366.html

到了这里,关于elementUI Tree 树形控件单选实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/weixin_48998573/article/details/136906711

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element-UI控件Tree实现数据树形结构

            在前端开发中,有时会遇到所有菜单数据在同一级的情况,后端未对数据进行分级处理;但前端渲染需要是树状结构的数据,如何实现数据的树状化?将数组中通过父节点的ID与子节点的parentId关联,通过递归函数来实现。         前端框架这里使用element-ui的tree控件

    2024年02月05日
    浏览(11)
  • elementui-树形控件实现 两棵树的联动,两棵树有相同的id节点时节点的状态保持一致

    1、遇到一个情景:需要勾选用户的权限和回显用户的权限,权限分为两棵树形结构,这两颗树有一些节点的id是一样的,需要在第一个树勾选的时候,另外一棵树也勾选,不勾选的时候状态保持一致,回显也是一样的操作 2、代码 树形的代码: 树形节点点击的事件 data数据

    2024年02月02日
    浏览(9)
  • element-ui树形控件(tree)

    1.基础用法 通过:data绑定了数据源,通过:props绑定了属性绑定对象,其中label代表着我们看到的是哪个属性对应的值,children代表父子节点通过哪个属性实现嵌套的 2.为树形控件添加show-checkbox属性,可实现复选框效果。如果要求选中的是文本对应的id值,而不是文本值本身。可

    2024年02月13日
    浏览(19)
  • [vue3] Tree/TreeSelect树形控件使用

     ✨✨个人主页:沫洺的主页 📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏                             📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏                            📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCl

    2024年02月08日
    浏览(13)
  • Element-UI定制化Tree 树形控件

    说明:复制Tree树形控件。 说明:每一个label前面都有一个定制图标 或者     说明: 将默认箭头形式变成加号形式。      

    2024年02月04日
    浏览(9)
  • 78.(前端)分配权限页面显示——树形结构使用(Element-ui的Tree树形控件)

    在前端的操作中,应该增加修改、删除、分配权限的操作 这次主要是实现分配权限的显示!!!!!! 更换icon图标,并设计大小 绑定函数,点击弹出提示框(DIalog对话框) 在对话框内,应该显示一个树形结构提供选择(Tree树形控件) 初始化树形结构,并填充数据

    2024年02月05日
    浏览(10)
  • element-ui树形控件el-tree详解

    概述 这里我利用element-ui开发一个vue的树形组件 引入element-ui 安装element-plus 安装按需导入 修改vite.config.js配置按需加载 tree树形控件详解 属性名 说明 类型 可选值 默认值 data 展示数据 array — — empty-text 内容为空的时候展示的文本 string — — node-key 每个树节点用来作为唯一标

    2024年02月07日
    浏览(9)
  • vue2+element-ui el-tree树形控件封装

    1.封装 根据官网配置项封装了下el-tree 方便维护和复用,有用的话点赞收藏叭~ 2.使用 如若要对不同的一级二级节点设置不同的样式可以参考这样:

    2024年02月12日
    浏览(8)
  • element UI中实现tree树形控件部分选中时父级节点也被选中

    最近有一个很奇葩的需求,在使用element UI中的tree树形控件选中功能时,子节点部分选中时父级节点也要被选中,并且回显也要保留部分子节点选中父节点半选中状态。 按照平时正常逻辑来处理,提交时只需要获取选中项的父级节点一并提交即可,这样正常提交是没有任何问

    2024年02月08日
    浏览(17)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包