vue的tree组件

最新推荐文章于 2024-02-27 12:01:27 发布
最新推荐文章于 2024-02-27 12:01:27 发布
阅读量434 收藏
点赞数
文章标签： vue tree 练手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shentibeitaokong/article/details/83307757
版权

看   https://github.com/vuejs/vue/tree/dev/examples/tree

超简单的demo，主要理解递归组件。暂时保存一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js tree view example</title>
    <style>
      body {
        font-family: Menlo, Consolas, monospace;
        color: #444;
      }
      .item {
        cursor: pointer;
      }
      .bold {
        font-weight: bold;
        display: inline-block;
        position: relative;
      }
      .show {
          position: absolute;
          left: -30px;
      }
      .main:hover .add{
        display: inline-block;
      }
      .add {
        display: none;
      }
      ul {
        margin-top: 0;
        line-height: 1.5em;
        list-style-type: none;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
 <body>
      <div id='app'>
        <md-tree class="item" :model="treeData"></md-tree>
      </div>
      <script type="text/javascript">
        Vue.component('MdTree', {
          name: 'md-tree',
          props: {
             model: Object
           },
          data () {
            return {
               open: false
            }
          },
          computed: {
            isFolder () {
              return this.model.children &&
              this.model.children.length
            }
          },
          template : `
          <li>
            <div
            :class="{bold: isFolder}" class="main">
            <span class="show" v-if="isFolder" @click="toggle">[{{open ? '-' : '+'}}]</span>
            {{model.name}}
            <span @click="addChild(model)" v-if="model.name !== '根节点'" class="add"> + </span>
            </div>
            <ul v-show="open" v-if="isFolder">
              <md-tree
                class="item"
                v-for="(model, index) in model.children"
                :key="index"
                :model="model">
              </md-tree>
            </ul>
          </li>`,
          methods: {
                toggle: function () {
                if (this.isFolder) {
                  this.open = !this.open
                }
              },
              changeType: function () {
                if (!this.isFolder) {
                  Vue.set(this.model, 'children', [])
                  this.addChild()
                  this.open = true
                }
              },
              addChild (model) {
                if (model.children) {
                  model.children.push({name: '新节点'})
                  this.open = true
                } else {
                   Vue.set(model, 'children', [
                      {name: '新节点'}
                    ])
                   this.open = true
                }
                console.log(model)              
              }
          }
       });


       var app = new Vue({
          el : '#app',
          data () {
            return {
              treeData: {
                name: '根节点',
                children: [
                  { name: '节点1' },
                  { name: '节点2' },
                  {
                    name: '节点3',
                    children: [
                      {
                        name: '节点3.1',
                        children: [
                          { name: '节点3.1.1' },
                          { name: '节点3.1.2' }
                        ]
                      },
                      { name: '节点3.2' },
                      { name: '节点3.3' },
                      {
                        name: '节点3.4',
                        children: [
                          { name: '节点3.4.1' },
                          { name: '节点3.4.2' }
                        ]
                      }
                    ]
                  }
                ]
              }
            }
          }
        });
     </script>

  </body>
  </html>

 

shentibeitaokong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
记录基于Vue.js的移动端Tree树形组件
Mr.小灰狼_随笔
06-09 1万+
Vue 树形选择器（ Vue tree select ）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 2款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。
如何实现vue的tree组件
01-18
Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。 效果 节点可以无限的递归延伸 可以展开和收起子节点 如果子节点全部选择...
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
10-17
也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，本文重点给大家介绍vue递归组件的简单实现，感兴趣的朋友跟随小编一起看看吧
具有增、删、改、查功能的vue-tree树组件
有问题可关注公众号：前端研究院 后台输入问题回复
04-16 548
tree.vue <template> <div> <div class="all-div" v-if="model.name"> <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }"> <span v-show="model...
前端-Vue3递归组件&自定义Tree
小左的博客
02-27 970
PS：子集不处理事件，无限向上抛出，最后有父级处理。// 增加选中事件});// 子集向上抛出事件Tree 组件// 增加绑定选中事件},// 定义v-model绑定的参数type: [],});// 保存全部选中的节点// 值更新抛出事件// 节点是否选中，选中数组新增，取消选中数组删除} else {// 绑定值更新。
MapReduce框架原理之ReduceTask工作机制
qq_44110741的博客
09-19 601
一、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 6042
在工作中我们经常会用到Tree组件，今天就来实现一个简易版的Tree组件，完整的代码请到仓库获取在线预览github 地址 数据展示 先来看看用户传递过来的数据 从上面的使用可以了解到需要定义接收 data、props属性，触发一个node-click事件 getNodes 将用户传递过来的数据进行转换renderContext 使用转换后的数据渲染，需要考虑有子节点和没有子节点的情况初次渲染的效果 renderContext中给content添加is-expand类，展开条件判断
Vue编写的树形tree组件
热门推荐
Jeff的博客
02-21 4万+
近期在进行vue的学习，自研的vue项目需要一个tree组件。由于在学习阶段，不想‘拿来主义’，拿别人写好的组件使用，对于处于学习阶段的开发者来说不是一件好事，虽然拿别人开发好的东西过来用可以快速进行业务开发，但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式，与其说是学习一门语言，不如说是学习一种成熟组件的使用方式。自己动手写一写还是非常有利于自身水平提升的。于是，开始动手自己写vue...
最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
蒋川@卡拉云
02-28 1万+
Vue 树形选择器（Vue tree select）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 7 款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。
一款实现树形结构的插件vue-tree-color
NIKKT的博客
04-28 2410
通过以上步骤，我们可以在Vue中使用vue-tree-color组件实现树形结构的展示和交互，并且可以自定义节点图标和颜色。需要注意的是，vue-tree-color还支持更多的配置选项和事件回调函数，可以根据实际情况进行使用和修改。vue-tree-color是一款基于Vue.js的树形组件，支持树形结构的展开/折叠、选中、拖拽等功能，并且可以自定义节点图标和颜色。vue-tree-color支持自定义节点图标和颜色。1.安装vue-tree-color。3.使用vue-tree-color。
vue递归组件—开发树形组件Tree--(构建树形菜单)
我总是词不达意的博客
06-15 1万+
vue递归组件—开发树形组件Tree--(构建树形菜单)
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
vue自定义浏览器滚动条(已兼容ie)
Vue2组件tree实现无限级树形菜单
08-31
主要为大家详细介绍了Vue2组件tree实现无限级树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-tree-list:tree树形结构的Vue组件
05-02
树结构的Vue组件。 支持添加treenode / leafnode，编辑节点名称并拖动。 安装 安装插件，然后您就可以全局使用该组件了。 import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue . use ( VueTreeList...
2014年311教育学专业基础综合答案解析.pdf
04-24
教育学考研，考研真题，全国硕士研究生统一考试教育学专业基础综合真题及解析，311历年真题，参考答案，答案解析。教育学统考。
大语言模型安全测试方法
04-24
4月16日联合国日内瓦总部万国宫，由世界数字技术院（WDTA）与云安全联盟大中华区（CSA GCR）联合主办第27届联合国科技大会AI边会上，世界数字技术院（WDTA）发布了两项具有重要意义的国际标准：“生成式人工智能应用安全测试标准”和“大语言模型安全测试方法”。这是国际组织首次在生成式AI应用安全、大模型安全领域发布国际标准，为业界提供了统一的测试框架，标准的发布将对人工智能领域产生深远影响，推动人工智能技术的安全、可靠发展。 这两大标准由云安全联盟大中华区研究院副院长黄连金带领的专家团队编制而成，他们来自CSA大中华区、OpenAI、蚂蚁集团、谷歌、微软、亚马逊、英伟达、OPPO、科大讯飞、百度、腾讯、加州大学伯克利分校、芝加哥大学、香港科技大学等数十家单位，体现了业界的广泛协作与集体智慧。 云安全联盟大中华区主席、世界数字技术院执行理事长李雨航院士发布时介绍，“生成式人工智能应用安全测试标准”为测试和验证生成式AI应用的安全性提供了一个框架，特别是那些使用大语言模型构建的应用程序。它定义了人工智能应用程序架构每一层的测试和验证范围，确保AI应用各个方面都经过严格的安全性和合规性
基于ssm电商网站的设计与实现(部署视频)_kaic.zip
04-24
目 录 目 录 1 绪论 1.1 研究背景 1.2 目的和意义 1.3 论文结构安排 2 相关技术 2.1 SSM框架介绍 2.2 B/S结构介绍 2.3 MYSQL数据库介绍 3 系统分析 3.1 系统可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 运行可行性分析 3.2 系统性能分析 3.2.1 易用性指标 3.2.2 可扩展性指标 3.2.3 健壮性指标 3.2.4 安全性指标 3.3 系统流程分析 3.3.1 操作流程分析 3.3.2 登录流程分析 3.3.3 信息添加流程分析 3.3.4 信息删除流程分析 4 系统设计 4.1 系统概要设计 4.2 系统功能结构设计 4.3 数据库设计 4.3.1 数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1用户信息管理 5.2 商品信息管理 5.3商品分类管理 5.1商品资讯管理 6 系统测试 6.1 系统测试的特点  6.2 系统功能测试 6.2.1 登录功能测试 6.2.2 添加类别功能测试 6.3 测试结果分析 结 论 致 谢 参考文献
Comfast CF-924AC V3无线网卡驱动
最新发布
04-24
https://editor.csdn.net/md/?articleId=137978326文章对应USB 1300M无线网卡驱动，使用方式请参考博文。本驱动为博文对应的RDK X3平台所用，其它平台根据博文链接下载源码编译。
2024-2030全球与中国实时老化测试市场现状及未来发展趋势.docx
04-24
2024-2030全球与中国实时老化测试市场现状及未来发展趋势
vue tree 组件
11-18
Vue Tree组件是一个基于Vue.js的可折叠树形组件，可以用于显示层次结构数据。以下是一个简单的Vue Tree组件的示例： ```vue <li v-for="node in treeData" :key="node.id"> (node)"> , 'collapsed': !node....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值