【前端】pid2children iview tree json
<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的更多相关文章
- tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加
tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加
- IVIEW TREE问题总结
1. API得到的tree数组数据,在前端构造成iview tree格式,无法编辑或者无法再次选中的问题: 由于VUE不能检测到数据或对象的变动,官网文档有解释 由于 JavaScript 的限制,V ...
- Python web前端 08 字符串 数组 json
Python web前端 08 字符串 数组 json 一.string #string 字符串 #索引 下标 偏移量 ---从0开始 str[index]; #通过索引取字符串 可读不可写 str. ...
- 【整理】iview Tree数据格式问题,无限递归树处理数据
iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20
- ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组
1.引子 Json是跨语言数据交流的中间语言,它以键/值对的方式表示数据,这种简单明了的数据类型能被大部分编程语言理解.它也因此是前后端数据交流的主要方式和基础. 2.前端往后台传输json数据 第一 ...
- 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上
1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...
- iview tree 获取选中子节点的整条数据链
这样子获取到数据是,checked等于true的,获取不到他的父级,父级的父级 解决办法代码如下: //需要有一个唯一ID //==================================== ...
- 前端数据交互之json&ajax
1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据 ...
- php前端传过来的json数据丢失 (max_input_vars)
开发向我反馈,前端业务页面提交数据用js将要传输的数据用json dump后,发给服务器,服务器在loads后发现数据是不全的. 这个问题困扰开发人员和运维人员.首先调整php.ini文件的上传文件数 ...
随机推荐
- 用 SDL2 平铺背景并显示前景
环境:SDL2 + VC++2015 下面的代码将打开background.bmp和image.bmp,将background平铺背景,将image作为前景呈现 #include <iostre ...
- linux以行为单位进行读写操作
1 gets/fgets函数 char* fgets(char *restrict buf,int n,FILE *restrict fp) 参数1:存放读入串的缓冲区 参数2:表示读入的字符个数,最 ...
- Codeforces404C【构造】
题意: 一个图有n个点,每一个点最多连接k条直线,给出多有起点到终点的距离,没有环,不能输出重边,输出所有有连接的单向边 思路: 就是简单想-不知道怎么说了,画个图,我们建边,那么距离是 i 就是连距 ...
- cocos2d-html5基础
1 环境搭建 版本Cocos2d-html5-v2.2,tomcat7.0 配置tomcat,然后直接解压Cocos2d-html5-v2.2.zip,访问解压后的根目录的index.html就可以看 ...
- 安装 statconn 使R与c#交互
很久以前完成过,但是最近重新折腾发现全忘了,所以记下来. 1.安装 R 2.安装 R studio 3.去 http://rcom.univie.ac.at/download.html 下载 stat ...
- 蒟蒻ACMer回忆录 · 一段弱校ACM的奋斗史
三年半的ACM生涯终于迎来了终点,退役之时,感慨万分,故写此文以纪念逝去的时光,那些为ACM拼搏的日子,那段弱校ACM的奋斗史. 三年半的ACM生涯,窝见证了CUMT从打铁到铜牌的突破,又见证了从铜牌 ...
- LuoguP2822 组合数问题(组合数,二维前缀和)
P2822 组合数问题 输入输出样例 输入样例#1: 复制 1 2 3 3 输出样例#1: 复制 1 输入样例#2: 复制 2 5 4 5 6 7 输出样例#2: 复制 0 7 说明 [样例1说明] ...
- MySQL `explicit_defaults_for_timestamp` 与 TIMESTAMP
考察下面的 SQL 脚本: CREATE TABLE test1( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, data VARCHAR(20), ts1 ...
- Asp.net core 框架整理
https://github.com/thangchung/awesome-dotnet-core#cms
- CentOS下查看网络状态
查看网络状态:lsof -Pnl +M -i4 显示ipv4服务及监听端情况netstat -anp 所有监听端口及对应的进程netstat -tlnp 功能同上 网络基本命令 (1)network ...