<script>
import inBody from '../inBody'
export default {
components:{
inBody
} ,data () {
return {
data2: [
{title: 'parent 1'}
,{title: 'parent 1'}
]
,pidData:[
{id:"1",pid:"0",title:"一级目录"}
,{id:"2",pid:"0",title:"又是一个一级目录"}
,{id:"3",pid:"1",title:"二级栏目"}
]
}
}
,methods:{
pid2children:function(){ let pidData2 = this.pidData //pidData就是pid数据
//pidData2 === this.pidData ? console.info("true") : console.info("false")
pidData2.forEach(el => {
delete el.children //delete 删除数组 数组长度不变 特别适合 索引用
}) let map = {}
pidData2.forEach(el => {
map[el.id] = el // 循环data拿到所有的id
}) let arr = []
pidData2.forEach(el => {
let parent = map[el.pid] // 拿到所有的pid,如果为真,和id进行对比,如果pid===id,就说明是id的子集
if (parent) {
(parent.children || (parent.children = [])).push(el)
} else { // 如果不是就是第一级,没有pid或者pid为0
arr.push(el)
console.log('arr', arr)
}
}) return arr;
}
}
,mounted:function(){
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
//this.getData2()
}) }
}
</script>

  

【前端】pid2children iview tree json的更多相关文章

  1. tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加

    tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加

  2. IVIEW TREE问题总结

    1. API得到的tree数组数据,在前端构造成iview tree格式,无法编辑或者无法再次选中的问题: 由于VUE不能检测到数据或对象的变动,官网文档有解释 由于 JavaScript 的限制,V ...

  3. Python web前端 08 字符串 数组 json

    Python web前端 08 字符串 数组 json 一.string #string 字符串 #索引 下标 偏移量 ---从0开始 str[index]; #通过索引取字符串 可读不可写 str. ...

  4. 【整理】iview Tree数据格式问题,无限递归树处理数据

    iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20

  5. ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组

    1.引子 Json是跨语言数据交流的中间语言,它以键/值对的方式表示数据,这种简单明了的数据类型能被大部分编程语言理解.它也因此是前后端数据交流的主要方式和基础. 2.前端往后台传输json数据 第一 ...

  6. 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上

    1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...

  7. iview tree 获取选中子节点的整条数据链

    这样子获取到数据是,checked等于true的,获取不到他的父级,父级的父级 解决办法代码如下: //需要有一个唯一ID //==================================== ...

  8. 前端数据交互之json&ajax

    1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据 ...

  9. php前端传过来的json数据丢失 (max_input_vars)

    开发向我反馈,前端业务页面提交数据用js将要传输的数据用json dump后,发给服务器,服务器在loads后发现数据是不全的. 这个问题困扰开发人员和运维人员.首先调整php.ini文件的上传文件数 ...

随机推荐

  1. 洛谷P1113杂物——DP

    题目:https://www.luogu.org/problemnew/show/P1113 每个任务的时间就是准备工作中完成最晚的那个的时间再加上自己的时间. 代码如下: #include<i ...

  2. Linux 开机引导和启动过程详解

    你是否曾经对操作系统为何能够执行应用程序而感到疑惑?那么本文将为你揭开操作系统引导与启动的面纱. 理解操作系统开机引导和启动过程对于配置操作系统和解决相关启动问题是至关重要的.该文章陈述了 GRUB2 ...

  3. mfc设置半透明对话框

    BOOL CDialog7::OnInitDialog() { CDialog::OnInitDialog(); // TODO: 在此添加额外的初始化 ::SetWindowLong(GetSafe ...

  4. centos查看CPU的数量

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  5. 任务44:Identity MVC: EF + Identity实现

    使用VSCode开发 Razer的智能感知不好.所以这里切换为VS2017进行开发: 新建一个Data的文件夹来存放我们的DBContext.在Data文件夹下新建: ApplicationDbCon ...

  6. git status -s 的表达式的读法

     1  2  读法  解决方案  ??    未被追踪  git add -A 或git add 文件路径  A    新添加文件 注:??被add后的状态  OK,等待commit.  M    已 ...

  7. on a null object reference 问题的解决办法

    FATAL EXCEPTION: …… java.lang.RuntimeException: Unable to start activity ComponentInfo…… ava.lang.Nu ...

  8. bzoj 3676: [Apio2014]回文串【回文自动机】

    回文自动机板子 或者是SAM+manacher+倍增,就是manacher求本质不同回文串(让f++的串),然后在SAM倍增查询对应点出现次数 #include<iostream> #in ...

  9. 实例List化

    实现了__iter__()的实例虽能用于for循环,看似像list,但并不能将其当做list来使用,比如,Fib()[5]还是报错 可通过实现__getitem__()方法,:来实现让实例像list那 ...

  10. 跟我一起玩Win32开发(8):绘图(A)

    从本篇开始,我就不吹牛皮,那就吹吹兔皮吧.说说与绘图有关的东东. 要进行绘制,首先要得到一个DC,啥是DC呢?按字面翻译叫设备上下文,也可以翻译为设备描述表,它主要指API为我们封装了一些与显示设备相 ...