vue3 tree组件slots特性实践

已于 2024-07-25 06:17:12 修改
阅读量246 收藏
点赞数 3
分类专栏： Vue3开源组件实战 文章标签： vue3 ts jsx tsx slots
于 2024-07-23 16:27:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/felix_alone2012/article/details/140639550
版权

上一小节我们实现了SvgIcon组件来支持组件开发中用到字体图标的地方，并应用在了tree节点折叠、展开的图标上，本小节我们将其用到tree的插槽内容中，一起来学习基于Vue3 tsx的插槽用法吧~

先看要实现的效果：

要实现的文档部分：

在这里插入图片描述

完善vitepress文档

这里判断父节点和叶子节点分别用不同的颜色来填充。

编写带有slots的tree组件用法示例

完善tree组件

需要在setup方法参数中注入slots。

样式调整：

tree样式新增内容：

最后是slots的用法：

Java小卷
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
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
Vue3---手写Tree组件
Dormiveglia-flx的博客
04-04 1616
1 添加myOptions ,使之双向绑定，绑定的数据来自prop.options传来的数据，不直接用prop.options传来数据的原因是因为要加isOpen，防止原数据遭到污染。但是问题是现在的数据有的item会有4层的children，有的item会有10层的children，，但是我们不能准确的知道需要使用多少个v-for。重点：通过isOpen属性的true，false，来使组件是否v-show隐藏显示。关于使用v-for 和 递归时候，数据是怎么渲染出来的分析。，这个时候，我们可以考虑。
vue3 组件库 (六)：Tree 组件
weixin_43960320的博客
03-23 6886
在工作中我们经常会用到Tree组件，今天就来实现一个简易版的Tree组件，完整的代码请到仓库获取在线预览github 地址 数据展示 先来看看用户传递过来的数据 从上面的使用可以了解到需要定义接收 data、props属性，触发一个node-click事件 getNodes 将用户传递过来的数据进行转换renderContext 使用转换后的数据渲染，需要考虑有子节点和没有子节点的情况初次渲染的效果 renderContext中给content添加is-expand类，展开条件判断
vue组织树（树形组件vue3)
m0_49159526的博客
06-21 7127
本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的基础上，又增加了组织树展示效果，并同时支持拖拽，及自定义组织树的展开收起样式......
利用递归组件实现一个简单的树组件（vue3）
qq_2511276124的博客
11-11 1895
闲来无事不从容，睡觉东窗日已红。 万物静观皆自得，四时佳兴与认同。 最近学习vue3组件的时候实现了一个简单的树组件。话不多说，直接上代码。 这个数组件实现了展开、选中和选择三个基本效果。如果有兴趣的话，可以自己参考代码实现其他更加牛叉的效果，例如，自定义树结构，单多选，搜索、排序等等。
vue3-treeview:vue js 3中的一个简单的treeview
04-08
5. **自定义渲染**: Vue.js 提供了模板语法来定制组件的渲染，Vue3 Treeview 可能会提供钩子函数或者props，允许用户自定义节点的样式和行为，如使用 slots 来定义节点的内容。 6. **事件处理**: 树视图通常需要...
Vue iview tree+poptip 鼠标移动使用气泡显示完整文字
10-29
首先，让我们了解Vue的Ivew Tree组件。Tree主要用于展示层次结构的数据，它支持多种操作，如展开/折叠节点、选择节点等。在Ivew Tree中，每个节点通常包含简短的文字信息，但有时这些信息可能不足以完全表达节点的...
vue2树形组件打造vue2下最简洁高效的树组件
08-12
3. **属性和方法**：Vue组件通过props接收外部数据，`Tree`组件可能需要的props有`data`（树的数据）、`defaultExpandedKeys`（默认展开的节点键）等。同时，组件内部会定义一些方法，如`toggleNode`（切换节点展开/...
基于Vue的树形选择组件
08-08
9. **插槽（Slots）**：Vue.js 提供了一种方式让父组件能够向子组件注入内容，这在树形选择组件中可能用于自定义节点的内容和样式。 10. **CSS样式和过渡效果**：为了提供良好的用户体验，组件可能会包含自定义的...
ant-design-vue自定义a-tree组件
随书笔记
03-21 1371
vue2+ant-design-vue1.7.2版本
vue-virtual-tree:基于Vue3的大量数据的树组件
04-30
虚拟树 基于vue3封装的树组件，该树组件专用于大数据量，如果数据量不大，则使用此组件会有点浪费 英文＆ 如何使用 npm i vue-virtual-tree 全局注册，但这会丢失类型，如果您使用打字稿，则不建议使用此方法 import { createApp } from 'vue' ; import VirTree from 'vue-virtual-tree' ; createApp ( App ) . use ( VirTree ) . mount ( '#app' ) ; In components : < vir> 部分注册，您可以获得完整的类型 < template> < div xss=removed> < vir xss=removed> < / div > < / template > < s
vue3-blocks-tree:vue3块组织树视图组件。 分层的水平或垂直树
04-29
vue3块树 基于Vue3.x的简单组织结构树视图。 它支持事件，时段，水平视觉和节点操纵 感谢和他以vue 2为基础的资料。 用法 < template> < h1>Basic</ h1> < div> < blocks xss=removed xss=removed xss=removed xss=removed></ blocks> </ div> < h1>With slots</ h1> < div> < blocks-tree : data = " treeData " : horizontal = " treeOrientation == ' 1 ' " : collapsable
vue3-router-tree:表示路由结构的树
05-29
Vue 3 路由器树 此组件基于Vue.js 3 ，它将您的路由或项目表示为树视图，默认情况下将路由配置作为项目，但您可以提供遵循以下格式的自定义项目： [ { path : '/somePath' , //optional name : 'someName' , //required component : SomeComponent //optional but if it's provided the tree node will be a link that redirects to this component children : [ ] } ] 当您想要自定义项目呈现时，您还可以添加您需要的任何其他字段 演示版 或者你可以在codeandbox上检查这个 安装 npm install vue3-rou
vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
weixin_44867717的博客
09-22 2977
【代码】vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法。
vue-project-tree vue3 树形结构展示组件
one-ccs 的博客
04-22 1460
vue-project-tree 使用 Vue3 + TS 实现的树形结构展示组件，有拖拽、排序、自定义图标等功能
vue3递归组件---树形组件
忧郁的蛋的专栏
12-08 1944
第二种方式 就是像vue2 一样 export一个name出去。但是setup 语法糖下没办法使用 export。App.vue 里模拟树形数据，使用递归组件。我们只需要再定义一个script标签就可以了。要注意在树形组件的里层也得添加自定义事件。并且这个自定义事件传的函数很有讲究。type.ts 属性数据的结构。
vue3封装树型组件
m0_73110566的博客
10-16 392
【代码】vue3封装树型组件。
【前端】vue3树形组件使用
最新发布
weixin_43366051的博客
04-22 2727
随着开发语言及人工智能工具的普及，使得越来越多的人学习使用vue前端工具，本文主要是介绍vue3中树形组件的使用。树形组件是一种常见的用户界面元素，用于以层次结构的形式显示数据。它通常用于展示具有父子关系的数据，例如文件系统结构、组织架构、类别和子类别等。树形组件通常由树节点（节点）组成，每个节点可以包含子节点，形成树状结构。用户可以展开或折叠节点，以便查看或隐藏其子节点。用户可以选择一个或多个节点，以执行特定操作，例如删除、移动或编辑。允许用户通过拖放节点来重新组织树的结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Java小卷

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

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

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

打赏作者

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

抵扣说明：

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

余额充值