<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. Laravel 新增的Switch模板控制语句非常不错

    切换语句switch语句可以使用来构建,,,和指令:@switch@case@break@default@endswitch @switch($i) @case(1) First case... @b ...

  2. margin-----总结----解析逻辑

    margin的解析逻辑 在 margin 中 top.right.bottom.left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和botto ...

  3. pythonchallenge 2

     pythonchallenge是一个很有意思的学习python的网站,通过用程序解开一个谜,可以进入到下一个level,总共有几十个level,网址是http://www.pythonchallen ...

  4. 任务13:在Core Mvc中使用Options

    13 新建Controllers文件夹,在里面添加HomeController控制器 新建Views文件夹,再新建Home文件夹.再新建Index.cshtml的视图页面 注释上节课的代码,否则我们的 ...

  5. ORACLE PL/SQL 实例精解之第六章 迭代控制之一

    6.1 简单循环 简单循环,就想其名称一张,是一种最基本循环.简单循环具有如下结构 LOOP STATEMENT 1; STATEMENT 2; ... STATEMENT N; END LOOP; ...

  6. (4)ASP.NET Core 中间件

    1.前言 整个HTTP Request请求跟HTTP Response返回结果之间的处理流程是一个请求管道(request pipeline).而中间件(middleware)则是一种装配到请求管道以 ...

  7. Codeforces703B Mishka and trip

    题意: 就是有n个点,本来相邻点之间就有一条边,1和n之间也有一条,然后给你几个特殊点,说这些特殊点和其他所有点都连起来了,然后算一个所有边的权值和,每条边的权值等于两个点的c相乘. 思路: 水题啊- ...

  8. poj1661【DP,左右两端dp】

    /* [过滤这一段~~~] 一开始想的[错误的,为自己的总结的写的,读者略过]: 每个状态的点肯定是高度,那么我DP每一层,这样的话就有一层循环,其实这无关复杂度,不会很多时间 错误的是想法是从最高层 ...

  9. 定位,标记,Socket通信传输位置

    # -*- coding: utf- -*- """ Editor : X-POWER Date : -- Motto : talk is cheap,show me y ...

  10. websocket来回收发消息

    # server- # pip install geventwebsocket# pip install flask from flask import Flask, render_template, ...