vue自定义tree树组件

最新推荐文章于 2024-04-22 19:26:15 发布
最新推荐文章于 2024-04-22 19:26:15 发布
阅读量3k 收藏 5
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49440146/article/details/124118824
版权

组件内容

<template>
    <div class="tree-box">
    <div
      class="tree-box-content"
      v-for="nodeItem in data"
      :key="nodeItem.code"
    >
      <div class="notetitle">
        <span
          class="icon"
          @click="childClick(nodeItem)"
          v-if="nodeItem.children.length"
        >
            <i :class="nodeItem.open? 'el-icon-minus' : 'el-icon-plus'" />
        </span>

        <span @click="childClick(nodeItem)">
            <span class="text">{
  { nodeItem[title] }}</span>
        </span>
      </div>
      <div
        v-if="
          nodeItem.children && nodeItem.children.length > 0 && nodeItem.open
        "
      >
        <myTree
          :dat
最低0.47元/天 解锁文章
不怎么样的程序员
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
记录基于Vue.js的移动端Tree树形组件
Mr.小灰狼_随笔
06-09 1万+
Vue 树形选择器（ Vue tree select ）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 2款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。
vue递归实现自定义树形菜单+单选变色(含源码及演示视频)
gdgztt的专栏
01-14 950
纯VUE递归实现树形菜单，涉及到自定义组件，父子组件通讯，子组件属性设置，动态设置class,style，阻止冒泡等
VUE自定义树形结构组件.zip
04-21
vue可以自动以封装tree树形结构图，如高亮的背景色、字体颜色、树形图图标等。高亮demo使用的是name，如果有需要可以直接改为value
【前端】vue3树形组件使用
最新发布
weixin_43366051的博客
04-22 2120
随着开发语言及人工智能工具的普及，使得越来越多的人学习使用vue前端工具，本文主要是介绍vue3中树形组件的使用。树形组件是一种常见的用户界面元素，用于以层次结构的形式显示数据。它通常用于展示具有父子关系的数据，例如文件系统结构、组织架构、类别和子类别等。树形组件通常由树节点（节点）组成，每个节点可以包含子节点，形成树状结构。用户可以展开或折叠节点，以便查看或隐藏其子节点。用户可以选择一个或多个节点，以执行特定操作，例如删除、移动或编辑。允许用户通过拖放节点来重新组织树的结构。
MapReduce框架原理之ReduceTask工作机制
qq_44110741的博客
09-19 650
一、Reduce Task 并行度决定机制 reduce task的并行度，也就是同时开启了几个reduce task。分为两种情况： 1、如果我们自己定义了分区器，我们能够确定自己的分区器能够形成几个物理分区，加入我们要生成5个分区，那么我们要再driver中设置与分区数量相等的reduce task数量： //默认值是1，手动设置为5 job.setNumReduceTasks(5); 2、如果我们采用默认的分区器，也就是HashPartitioner，那么只需要根据实际情况在dr...
vue3 组件库 (六)：Tree 组件
weixin_43960320的博客
03-23 6559
在工作中我们经常会用到Tree组件，今天就来实现一个简易版的Tree组件，完整的代码请到仓库获取在线预览github 地址 数据展示 先来看看用户传递过来的数据 从上面的使用可以了解到需要定义接收 data、props属性，触发一个node-click事件 getNodes 将用户传递过来的数据进行转换renderContext 使用转换后的数据渲染，需要考虑有子节点和没有子节点的情况初次渲染的效果 renderContext中给content添加is-expand类，展开条件判断
Vue编写的树形tree组件
热门推荐
Jeff的博客
02-21 4万+
近期在进行vue的学习，自研的vue项目需要一个tree组件。由于在学习阶段，不想‘拿来主义’，拿别人写好的组件使用，对于处于学习阶段的开发者来说不是一件好事，虽然拿别人开发好的东西过来用可以快速进行业务开发，但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式，与其说是学习一门语言，不如说是学习一种成熟组件的使用方式。自己动手写一写还是非常有利于自身水平提升的。于是，开始动手自己写vue...
vue递归实现自定义tree组件
斗师——Ace
08-02 740
1. 在tree/index.vue中： <template> <div> <ul> <item :model='data'></item> </ul> </div> </template> <script> import Item from './item' export default { components:{ ..
Vue组件tree实现树形菜单
08-30
首先，让我们了解Vue Tree组件的基本结构。这个组件通常由两部分组成：数据结构（list）和配置选项（options）。数据结构定义了树的各个节点，包括它们的名称、是否展开、是否高亮以及可能的自定义样式和子节点。...
Vue2组件tree实现无限级树形菜单
08-31
本篇将详细讲解如何在Vue2中使用自定义组件来创建一个可无限扩展的树形菜单。 首先，我们需要理解Vue组件的基本原理。Vue组件是可复用的Vue实例，它们可以嵌套并组合成复杂的用户界面。在这个场景中，我们将创建一...
Vue2.0权限树组件实现代码
08-29
在组件的样式和布局方面，我们可以看到使用了 Element-Ui 库的树形控件 `<el-tree>`，并对其进行了自定义样式的修改，以满足项目的需求。组件的样式使用了 CSS 来实现，包括了列表样式、图标样式、边框样式等。 ...
vue自定义树状结构图的实现方法
01-18
vue 实现自定义树状结构图 可动态添加、删除 可整体拖拽 如需内容也为动态，把组件内容使用input、select等组件替换 数据结构 treeData: [{ name: '1', child: [ { name: '2', child: [{ name: '1' }, { ...
7个最好用的Vue Tree Select树形组件
weixin_57726973的博客
05-29 8242
Vue 树形选择器（Vue tree select）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。 Vue JSTree - 全功能，树状单选多选，可拖拽，过滤搜索 Vue Draggable Nested Tree - 纯树形选择，轻盈趁手 Vue Tree List Component - 前端可编辑、删除，拖拽，界面友好
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
vue实现自定义实现树形控件treejs
SunnyRun
08-24 3345
说明：支持点击创建远程数据，loadDataAjax方法，需要自己研究功能小编已实现；针对多层级的列表，我们采用tree的方式，从根节点一次创建绑定子节点的方式，可以递归式的调用本身，对我们的树形结构进行展示；1、创建TreeList文件夹，其中创建：fonts文件夹、index.js文件、tools.js文件、Tree.js文件、VueTreeList.vue文件；近期的一个功能需求，实现一个树形结构：可点击，可拖拽，右侧数据可以拖拽到对应的节点内，可创建文件夹、可创建文件、编辑文件名、可删除等等；
vue递归组件—开发树形组件Tree--(构建树形菜单)
我总是词不达意的博客
06-15 1万+
vue递归组件—开发树形组件Tree--(构建树形菜单)
vue2封装简单的Tree组件
weixin_46273779的博客
03-17 1677
props: {data: {
vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree
Brad_chao的博客
11-01 2万+
目录 源 卡顿假死 预研 开发 业务中使用 组件中引入 功能列表 使用 源 由于业务开发过程中有树形数据，因此需要用到tree树形组件，鉴于项目是基于vue的，前期的ui组件库选型就是element-ui，于是采用了el-tree组件。但在实际使用过程中出现了几个意外。 卡顿假死 server端返回全部数据时，渲染全量的tree组件时前端直接卡死，排查发现业务数据大部分子节点的量级在万以上。页面卡死这种事是要直接“掉脑袋”的，马上换成懒加载模式。 改成懒加载模式后，前两层节点的
vue自定义递归组件实现展开收起
06-10
Vue的递归组件可以用于渲染树形结构，可以通过自定义递归组件来实现树形结构的展开和收起。 以下是一个简单的实现示例： 组件代码： ``` <template> <ul> <li v-for="item in items" :key="item.id"> <span class="toggle" @click="toggle(item)">{{ item.expanded ? '-' : '+' }}</span> <span class="text">{{ item.text }}</span> <tree v-if="item.children && item.expanded" :items="item.children"></tree> </li> </ul> </template> <script> export default { name: 'tree', props: { items: { type: Array, required: true } }, methods: { toggle(item) { item.expanded = !item.expanded; } } }; </script> <style scoped> ul { list-style: none; padding-left: 10px; } .toggle { display: inline-block; width: 20px; text-align: center; cursor: pointer; } .text { margin-left: 5px; } </style> ``` 上述代码中，我们定义了一个递归组件`tree`，用于渲染树形结构。该组件包含一个`items`属性，用于传入树形结构的数据。在组件的模板中，使用`v-for`指令遍历`items`数组，渲染每个节点。对于每个节点，我们添加了一个展开/收起按钮，并使用`v-if`指令判断子节点是否需要渲染。在点击展开/收起按钮时，调用`toggle`方法来切换节点的展开状态。 使用该组件时，只需要传入树形结构的数据即可： ``` <template> <div> <tree :items="items"></tree> </div> </template> <script> export default { data() { return { items: [ { id: 1, text: '节点1', expanded: false, children: [ { id: 11, text: '子节点1-1', expanded: false, children: [] }, { id: 12, text: '子节点1-2', expanded: false, children: [] } ] }, { id: 2, text: '节点2', expanded: false, children: [ { id: 21, text: '子节点2-1', expanded: false, children: [] }, { id: 22, text: '子节点2-2', expanded: false, children: [] } ] } ] }; } }; </script> ``` 这样，当用户点击节点的展开/收起按钮时，就会切换节点的展开和收起状态，并相应地展开或收起节点的子节点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值