<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. Android webkit 事件传递流程通道分析

    前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题.所以索性研究了一下keyevent 事件的传递流程. frameworks 层 keyevent ...

  2. STL--lower_bound()&upper_bound();

    又是两个黑科技一般的存在. 首先我们来介绍一下这两个函数: ForwardIter lower_bound(ForwardIter first, ForwardIter last,const _Tp& ...

  3. Table View Programming Guide for iOS---(二)----Table View Styles and Accessory Views

    Table View Styles and Accessory Views 表格视图的风格以及辅助视图 Table views come in distinctive styles that are ...

  4. teamviewer被识别为商业用途

    1.卸载teamviewer,在控制面板里或者用360等软件卸载: 2.删除下面两个目录 C:\Program Files (x86)\TeamViewer C:\Users\Administrato ...

  5. 为什么linux有足够的内存还进行swap?

    1.Linux在内存被用完之前开始交换.这是为了提高性能和响应能力: 性能提高是因为一些内存放磁盘缓存比方内存更合适.因此,最好将一个已经停用了一段时间的程序交换出去,而将经常使用的文件保存在缓存中. ...

  6. 如何修改hosts文件并生效

    hosts文件位置C:\Windows\System32\drivers\etc(可以建立一个.bat 的文件把(start "" C:\Windows\System32\driv ...

  7. 实例List化

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

  8. jQuery同时监听两个事件---实现同时操控两个按键

    我们都知道因为js是单线程的,所以没有可以同时触发键盘两个事件的方法 今天我们就来做一个可以实现这个功能方法 先来看一下成品图效果 接下来我们来看下具体是怎么实现的 注释写在了代码里面 <!DO ...

  9. Python基础知识(3)

    1:字符串类型转换 num = 100 num2 = " #num是整数类型的值,num2是字符串类型的值,如果把他们两个的类型转换下呢? int(num2) #int 整形成整数 str( ...

  10. laravel之Storage

    学习laravel一段时间了,从最开始文件保存到本地直到oss都使用原生或接口.今天偶尔看到了Storage.正好项目中有用到就在项目上使用了. 1.下载安装库 composer require ja ...