vue3中实现elementPlus树形控件一键展开和收起

已于 2024-01-12 11:29:24 修改
阅读量1.1k 收藏 8
点赞数 10
分类专栏： ❤️❤️--vue3项目实战记录 文章标签： javascript 前端 树形控件一键展开收起
于 2024-01-11 17:23:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/135534860
版权 
const treeRef = ref<InstanceType<typeof ElTree>>() as any;
// 一键展开和收起
const clickExpand = () => {
  Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.expand());
};
const clickCollapse = () => {
  Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.collapse());
};
suoh's Blog
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue +elementUl实现展开和收起功能
吴小花的博客
11-24 1万+
需求： 由于后台搜索选项有很多，影响页面美观，所以一进来要隐藏一部分搜索项，只保留1行，点击【展开搜索】按钮的时候才显示全部，点击【收起搜索】按钮又收起部分，保留1行。 需求分析： 由于不太好控制行数，因为不同屏幕尺寸展示的1行的内容并不相同（不考虑移动端），所以考虑用显示高度来控制。 解决思路： 所以这里通过控制搜索区域的高度来实现展开和收起搜索功能。 页面一进来是收起搜索状态，控制搜索区域的高度为120px,超出部分隐藏。 点击展开搜索的时候，调整搜索区域的高度为”auto" 定....
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
vue3树选择 具有嵌套选项的多选组件支持 。感谢及其源代码和库，以此作为vue 2的基础。 从他的资料库中取得重大变化： 属性value => modelValue 事件input => updated:modelValue 现在将插槽与<template> 特征 带有嵌套选项的单选和多选支持 模糊匹配 异步搜索 延迟加载（仅在需要时加载深度选项的数据） 键盘支持（使用“向上箭头”和“向下箭头”导航，使用“ Enter ”键选择选项，等等） 丰富的选项和高度可定制的 支持多种浏览器（请参阅） RTL支持 需要Vue 3.0+ 入门 建议通过npm安装vue3-treeselect，并使用类的捆绑器来构建您的应用程序。 npm install --save vue3-treeselect 本示例说明如何将vue3-treeselect与集成在一起。 <!-- Vue
vue递归组件实战之简单树形控件实例代码
10-16
主要介绍了vue递归组件实战之简单树形控件的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue+element-plus展开/收回功能
weixin_63954739的博客
09-04 408
他的样式已经完成了，在往js里面添加点击事件就可以了。如图这是项目里面想要的页面，展开和收回。
vue3 树形控件(带连线)
最新发布
qq_52373373的博客
07-04 289
vue3 树形控件(带连线) 用的ant defign of vue 里面的 toolstip 不需要可以删掉
Element Plus ----- el-tree 树型控件手动展开收起
weixin_56300816的博客
06-18 549
但是默认展开后的树占用了非常大的空间，也会影响用户体验，于是我们可以增加一个按钮来控制树型结构的展开和收缩。可能会遇到数据太多导致树结构过长的情况，若用户想要查看所有的数据结点，则需要一个一个去展开，着实影响用户体验。这么简单的功能element官方应该会有API提供吧，但是当我们去官方文档中找时，发现根本没有这个API。这种情况我们可以用树形控件的 default-expand-all 属性，令其默认全部展开。但是当我们输出Tree组件时，可以发现其实是有控制节点展开或收起的属性的。
elemen-ui 树形控件，默认选中第一个。
weixin_47121557的博客
06-30 2953
记录使用elemen-ui 树形控件。 默认选中第一个，展示第一个菜单下的子菜单。 <el-tree :data=“data” :props=“defaultProps” @node-click=“handleNodeClick” :current-node-key=“currentNodekey” node-key=“id” ref=“tree” highlight-current :default-expanded-keys=“expandedkeys” > ...
element plus 可选择树形组件(el-tree) 怎样一键展开/收起？实现方法详解
Z_B_L的博客
01-16 2960
element plus 可选择树形组件(el-tree) 一键展开/收起的实现方法
VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开（收起）；一键全选（不全选）
HanXiaoXi_yeal的博客
04-10 1641
注意：以上方法会展开或折叠所有节点；
vue3 element-plus el-tree树型组件，展开收起
u010782109的博客
07-13 1065
全部收起’ : ‘全部展开’在js上写下一下代码。
vue3+element plus实现查询条件展开和收起功能
JackChan
04-12 829
vue3+element plus实现查询条件展开和收起功能
基于vue3+elementPlus的后台管理系统模板实现
03-03
在基于Vue3+ElementPlus的后台管理系统模板实现中，以下几个核心知识点是必须要掌握的： 1. **Vue3的Composition API**：Vue3引入了Composition API，它允许开发者在任何组件内组合使用功能逻辑，提高了代码复用和...
vue和react等项目中更简单的实现展开收起更多等效果示例
08-28
vue和react项目中更简单的实现展开收起更多等效果示例 在本文中，我们将主要介绍如何在 Vue 和 React 项目中实现展开收起更多等效果。这个示例具有很高的参考价值，对感兴趣的小伙伴们可以作为参考。 首先，我们...
VUE饿了么树形控件添加增删改功能的示例代码
08-29
VUE饿了么树形控件添加增删改功能的示例代码 本篇文章主要介绍了VUE饿了么树形控件...本篇文章介绍了VUE饿了么树形控件添加增删改功能的示例代码，提供了树形控件的基本使用和增删改功能的实现方式，具有实用价值。
vue实现树形结构样式和功能的实例代码
10-16
这个树形控件的展开和折叠功能是通过`toggle`方法实现的，该方法通过改变`item`对象的`show`属性来控制子节点是否显示。通过使用`this.$set`方法，可以确保我们对数组的修改是响应式的。 当点击树节点时，会触发`...
VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能
Mr_Chp的博客
07-01 3715
VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能 文章目录背景实现思路 背景 ElementUI官方提供了el-table的树形结构展示方式。 通常使用树形结构时，会需要“全部展开”和“全部收回”的按钮功能，便于我们能够方便对数据表格的操作。比如下图的实现效果： 实现思路 官方文档中给出了表格级别的方法，在Table Methods中，可以找到 toggleRowExpansion 方法，其具体含义参见官网释义。 该方法可以实现表格中某一行的展开或者收缩功能，那么我们.
Vue+ElementUI实现查询条件展开和收起功能
热门推荐
hikktn的博客
01-10 1万+
首先，我想实现ant design vue中的展开和收起，效果如下： 看了几篇博客的实现思路，但都不太满意，我想要按钮那一行不要换行，直接显示在最后一列，具体效果如下： 实现过程与难点 第一点，就是思路的问题，我先看看display:none会给这几个输入框带来的影响是什么？有没有其他问题，经过测试，想到直接把按钮那一栏全部改成一个局部组件。 我们在使用他时，只需要在多列的最后添加这个子组件。 然后，就是判断它是否隐藏和显示。 好了，主要思路讲解到这里，我们直接上代码。 <!DOCTYPE ht
vue3+vite+ts+ant Design Vue实现自定义树型控件
weixin_44220888的博客
07-22 923
1、可实现模糊搜索功能，2、可实现自定义树型控件，
vue3中使用elementplus树形控件懒加载
06-11
在 Vue 3 中使用 Element Plus 的树形控件进行懒加载，可以通过在 `lazy` 属性上设置为 `true` 来实现。具体步骤如下： 1. 创建一个树形组件，在组件中使用 `el-tree` 标签引入 Element Plus 的树形控件，并设置 `lazy` 属性为 `true`。 2. 在 `el-tree` 标签中，设置 `load` 属性为一个函数，该函数接收一个节点对象作为参数，返回一个 Promise 对象。在该函数中，根据节点的 id 请求子节点数据，并将子节点数据作为 Promise 对象的返回值。 3. 在父组件中，使用 `el-tree` 标签引入树形组件，并传递根节点数据。在需要加载子节点数据时，点击节点即可触发 `load` 函数，异步加载子节点数据。 下面是一个简单的示例代码： ``` // Tree.vue <template> <el-tree :lazy="true" :load="loadChildren" :data="data"></el-tree> </template> <script> export default { data() { return { data: [] } }, methods: { async loadChildren(node) { // 异步请求子节点数据 const response = await fetch(`/api/nodes/${node.id}`) const children = await response.json() // 将子节点数据添加到节点对象中 node.children = children // 返回 Promise 对象，传递子节点数据 return children } } } </script> // Parent.vue <template> <div> <tree :data="data"></tree> </div> </template> <script> import Tree from './Tree.vue' export default { components: { Tree }, data() { return { data: [] } }, async mounted() { // 异步请求根节点数据 const response = await fetch('/api/nodes/1') const root = await response.json() // 设置根节点数据 this.data.push(root) } } </script> ``` 在 Tree.vue 中，使用 `el-tree` 标签引入 Element Plus 的树形控件，并设置 `lazy` 属性为 `true`，`load` 属性为一个异步函数 `loadChildren`。在 `loadChildren` 函数中，根据节点的 id 请求子节点数据，并将子节点数据添加到节点对象中，然后返回一个 Promise 对象，传递子节点数据。 在 Parent.vue 中，使用 `tree` 标签引入树形组件，并传递根节点数据。在 `mounted` 钩子函数中，异步请求根节点数据，并将根节点数据添加到 `data` 数组中，然后在模板中通过 `data` 属性传递给树形组件。在需要加载子节点数据时，点击节点即可触发 `load` 函数，异步加载子节点数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suoh's Blog

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

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

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

打赏作者

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

抵扣说明：

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

余额充值