Vue implements tree view data function-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Vue implements tree view data function

不言

May 07, 2018 pm 02:33 PM

Functiondataview

This article mainly introduces the implementation of Vue to implement the tree view data function. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Using a simple tree view implementation , familiar with the recursive use of components

This is the simulated tree diagram data

let all={ 
  name:&#39;all&#39;, 
  children:{ 
   A:{ 
    name:&#39;A&#39;, 
    children:{ 
     a1:{ 
      name:&#39;a1&#39;, 
      children:{ 
       a11:{  
        name:&#39;a11&#39;, 
        children:null 
       }, 
       a12:{  
        name:&#39;a12&#39;, 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:&#39;a2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:&#39;B&#39;, 
    children:{ 
     b1:{ 
      name:&#39;b1&#39;, 
      children:{ 
       b11:{  
        name:&#39;b11&#39;, 
        children:null 
       }, 
       b12:{  
        name:&#39;b12&#39;, 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:&#39;b2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

The code is as follows

treelist.vue

<template> 
<p> 
 <ul> 
  <li > 
   <span @click="isshow()">{{treelist.name}}</span> 
    <tree v-for="item in treelist.children"  
     v-if="isFolder" 
     v-show="open" 
     :treelist="item" 
     :keys="item" 
    ></tree> 
  </li> 
 </ul> 
</p> 
</template> 
<script> 
export default { 
 name:&#39;tree&#39;, 
 props:[&#39;treelist&#39;], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style lang="less"> 
</style>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>树形图</title> 
</head> 
<body> 
 <p id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </p> 
</body> 
</html>

index. js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:&#39;all&#39;, 
  children:{ 
   A:{ 
    name:&#39;A&#39;, 
    children:{ 
     a1:{ 
      name:&#39;a1&#39;, 
      children:{ 
       a11:{  
        name:&#39;a11&#39;, 
        children:null 
       }, 
       a12:{  
        name:&#39;a12&#39;, 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:&#39;a2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:&#39;B&#39;, 
    children:{ 
     b1:{ 
      name:&#39;b1&#39;, 
      children:{ 
       b11:{  
        name:&#39;b11&#39;, 
        children:null 
       }, 
       b12:{  
        name:&#39;b12&#39;, 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:&#39;b2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

After going through the pitfalls, I found that there is a similar case on the Vue official website, link → Portal

Refer to the official website method Finally, I tried to implement it

The difference between writing this way and my idea when I stepped on the trap is that such a component is only responsible for one object, traverses the objects in each children, and passes in the components one by one. Processing, and my first attempt was to pass the entire children into itself. It is a component that processes multiple objects. (The failure case of the first attempt, please see the bottom if you are interested)

Such a component handles What are the benefits of writing an object?

I can customize the switch in the component

I defined the variable open in data. Because the component is recursive, it is equivalent to each component having An open

Then why can’t I use this method the first time I step into a pit? Because my first attempt was A component processing multiple objects is equivalent to a switch controlling all objects in children. When the switch is turned on, all objects at the same level will be expanded.

Traverse children and pass in the component itself one by one. Use v-show to control whether to display

##defines a calculated attribute and determines whether to continue execution based on children

Bound a custom event on the span tag

Change the value of open

<span @click="isshow()">{{treelist.name}}</span>

Achieve the effect

The following is the pitfall I encountered when I first tried it

Record it here, and leave an impression when encountering similar problems in the future

I encountered such an error when I first came up

#After looking for the problem for a long time, I found that it was because I forgot to write the name in the component. When I use it, I must fill in the name and make it consistent with the label name

The initial implementation method uses component recursion to display the name of the current level and render it, and all objects in the children Pass it to yourself and then perform the same operation until children has no data. It is worth mentioning that

, if v-if is not added here, It will become an infinite loop and will continue to be executed, so we need to determine whether the currently executed object has a next level

My data has been slightly changed here , so the data I passed in for the first time was (index.html page)

Then I defined an event to handle the closing and opening of each layer , I use the pop-up box to check whether the value of Isopen has been changed

Let’s take a look at the result

When we first entered the page, the undefined in the brackets It is the current value of Isopen. Because it is not defined at this time, it is undefined

Then I clicked A

Because isopen has been inverted at this time, so isopen is true at this time

But the page still has no change, not to mention the expansion function, even undefined has not changed

After some Baidu, I found that Vue itself no longer allows direct changes to the values accepted by Props

After Vue2.0, child components cannot change the value of the parent component, only Respond to changes through child component $emit() and parent component $on()

Related recommendations:

Vue implements dynamics Refresh Echarts component

The above is the detailed content of Vue implements tree view data function. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

使用JavaScript实现自动登录功能Jun 15, 2023 pm 11:52 PM

随着互联网的发展，人们越来越依赖网络，大部分时间都在使用各种各样的网站和应用程序，这也使得我们需要记住很多账号和密码。为了方便用户的使用，很多网站提供了自动登录功能，让用户免除频繁输入账号和密码的烦恼。本文将介绍使用JavaScript实现自动登录功能的方法。一、登录流程分析在开始实现自动登录功能之前，我们需要了解整个登录流程。一般情况下，一个网站的登录流程

如何使用PHP实现天气预报功能Jun 27, 2023 pm 05:54 PM

PHP作为一款流行的后端编程语言，在Web开发领域广受欢迎。天气预报功能是一种常见的Web应用场景，基于PHP实现天气预报功能相对简单易懂。本文将介绍如何使用PHP实现天气预报功能。一、获取天气数据API要实现天气预报功能，首先需要获取天气数据。我们可以使用第三方天气API来获取实时、准确的天气数据。目前，国内主流的天气API供应商包括免费的“心知天气”和收

如何使用 Windows Copilot 与剪贴板一起展开、解释、总结或修改复制的文本Jul 29, 2023 am 08:41 AM

在Copilot目前在Windows11上拥有的少数功能中，也许最有用的功能是允许您交互和调整已复制到剪贴板的文本的功能。这使得将Copilot用作文本编辑和摘要工具变得容易，您可以直接从桌面使用。以下是您需要了解的有关使用Copilot在Windows上解释、修订、扩展和汇总文本的所有信息。如何在WindowsCopilot中使用复制的文本Copilot的预览版让我们第一次很好地了解了Windows对原生AI支持的集成。修改或扩展从其他地方复制的文本的早期功能之一可以通过内容创建、摘要、修订和

未来功能抢先用 Safari 技术预览 173 版本释出Jul 02, 2023 pm 01:37 PM

Apple今日释出了Safari技术预览173版本，涵盖部分可能于Safari17推出的功能。该版本适用于macOSSonoma测试版以及macOSVentura系统，有兴趣的用户可于官方网页下载。Safari技术预览173版于设定中新增了功能标志区块，取代原先开发菜单的实验功能。该区块可让开发者快速地搜索特定功能，并以不同形式将「稳定」、「可供测试」、「预览」或「开发人员」等状态标示出来。重新设计的开发菜单可以帮助创作者更容易找到关键工具，以便建立网页、网页应用程序、其他应用程序中的网页内容、

鸿蒙OS3.0的功能有什么？Jun 29, 2023 pm 10:53 PM

鸿蒙os3.0目前正在测试阶段，很快用户就将迎来新的系统体验了，那么相较于2.0版本，鸿蒙os3.0有什么功能呢？华为鸿蒙3.0包含了多屏协同、性能共享等功能，用户可以获得更加完善的协同体验，同时也能提升手机运行大型游戏或软件的流畅度。另外，它简化了小窗交互方式，并改进通知栏，带给你更为完美的体验，接下来就让小编给大家分析一下华为鸿蒙3.0新功能介绍，一起来了解一下吧。华为鸿蒙3.0功能介绍1、多屏协同：此前鸿蒙2.0可以在电脑手机之间互相切换使用，提高了用户的工作效率和使用体验，但此次的鸿蒙3

如何在iPhone上扫描QR码Jul 20, 2023 am 09:13 AM

Apple在设备中内置了这个方便的功能，可以从iPhone上的相机轻松访问它，这将允许您自动扫描设备上的QR码。二维码代表快速响应码，本质上是一种二维条形码，可以通过配备内置摄像头的各种智能手机和其他电子设备轻松扫描和解释。扫描二维码后，用户通常会被定向到特定网站或提示激活应用程序中的特定功能。这种令人难以置信的方便功能在现代智能手机（包括Apple的iPhone）中变得越来越普遍，它是用户以最小的努力访问信息，服务或功能的便捷方式。许多公司在实体产品上使用此功能，您可以扫描其产品上的二维码，然

Google Colab将很快使用Codey进行AI编码Jun 09, 2023 am 10:43 AM

GoogleColab是一个自2017年以来一直在促进Python编程的平台，它将利用Google的高级代码模型Codey引入AI编码功能。Codey基于PaLM2模型构建，对来自外部来源的大型高质量代码数据集进行了精心微调，以提高其在编码任务方面的性能。Colab即将推出的功能包括代码补全、自然语言到代码生成以及代码辅助聊天机器人。最初的重点将放在代码生成上，该功能旨在使用户能够生成更大的代码块并从注释或提示编写整个函数。这旨在减少编写重复代码的需求，允许用户专注于编程和数据科学的更复杂的方面

iOS 17更新了什么功能?Jun 06, 2023 am 08:22 AM

Apple今日正式发表iOS17，针对电话、FaceTime、讯息等方面作出了改善，让用户得以用不同以往的方式来与他人互动。透过iOS17，用户还能够全新的「NameDrop」功能来与朋友分享自己的资讯，只要使用者将装置贴近对方装置即可。Apple还将推出《日记》App，适合用来记录统整你想要保存的信息，例如照片、位置、活动、音乐等等，App甚至能够为你提供写作范例，让记录更加简单直截，该app预计将于今年稍晚于iOS推出。升級至iOS17後，當使用者將裝置橫放時，還能夠將iPhone當作時鐘使

See all articles