Vue将将后端返回的list数据转化为树结构的实现

2024-12-03 00:13:47

下载

cnpm i -S array-to-tree

引入

import arrayToTree from "array-to-tree";

使用

    const pidData = [
      { name: "aa", id: "1", pid: null },
      { name: "bb", id: 2, pid: 1 },
      { name: "cc", id: 3, pid: "" },
      { name: "dd", id: 4, pid: 3 },
      { name: "ee", id: 5, pid: "3" },
    ];
    const result = arrayToTree(pidData, {
      parentProperty: "pid",
      customID: "id",
      childrenProperty: "children",
    });
    console.log(result);

到此这篇关于Vue将将后端返回的list数据转化为树结构的文章就介绍到这了,更多相关Vue将将后端返回的list数据转化为树结构内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue实现目录树结构

本文实例为大家分享了vue实现目录树结构的具体代码,供大家参考,具体内容如下效果图代码组件部分 components/leftTree.vue <template> <div> <ul class="all-list"> <li v-for="(item, i) in list" :key="item.key"> <
Vue将将后端返回的list数据转化为树结构的实现

下载 cnpm i -S array-to-tree 引入 import arrayToTree from "array-to-tree"; 使用 const pidData = [ { name: "aa", id: "1", pid: null }, { name: "bb", id: 2, pid: 1 }, { name: "cc", id: 3, pid: "" }, { na
Vue 前端导出后端返回的excel文件方式

目录前端导出后端返回的excel文件处理文件的下载(后端Excel导出) 后端文件流通过 Blob 下载拼接 URL 下载前端导出后端返回的excel文件在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 页面: 先筛选,向后端请求接口返回excel文件,代码如下: const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder' console.log(this
VUE渲染后端返回含有script标签的html字符串示例

在接入支付宝支付模块的时候,支支返回的是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验.注意点:不能在当前页面追加任何元素例如原生js:innerHtml.appendChiled等等:Vue原生v-html也不可以因为其只能渲染html标签,script不能够识别. 需要重新创建一个空白Vue组件,用router进行传参,传参方式(新窗口打开) let routeData = this.$router.resolve({ path: 'Recharge',
前端如何更好的展示后端返回的十万条数据

目录前置工作后端搭建前端页面直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载今天跟大家来唠唠嗑,如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢? 前置工作先把前置工作给做好,后面才能进行测试后端搭建新建一个 server.js 文件,简单起个服务,并返回给前端 10w 条数据,并通过 nodemon server.js 开启服务没有安装 nodemon 的同学
Vue echarts模拟后端数据流程详解

目录 KOA2的使用安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口模拟服务
vue.js前后端数据交互之提交数据操作详解

本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo
ajax判断后端返回的数据是否为null的方法

1.后端返回: return null; 2.ajax需要判断: if(null != jsonStr && "" != jsonStr){ 具体代码: $.ajax( { type: "POST", data: { name: name, code: code }, dataType: "json", url: "info", success: function(jsonStr) { if(null != j
Vue切换组件实现返回后不重置数据,保留历史设置操作

版权 1.<router-view ></router-view> 外层包围<keep-alive> </keep-alive> keep-alive作用将组件实例缓存下来 <keep-alive> <router-view></router-view> </keep-alive> 2.清除组件缓存使用keep-alive 的 exclude="组件名" 属性 <keep-alive
关于vue二进制转图片显示问题后端返回的是byte[]数组

目录二进制转图片显示后端返回的是byte[]数组 1.二进制转图片显示问题 2.byte[]数组可显示关于返回二进制图片的处理二进制转图片显示后端返回的是byte[]数组 1.二进制转图片显示问题代码 lookPreview(this.previewID).then(response => { this.previewUrl = "data:image/jpeg;base64," + response.data; this.previewList.push(this.
vue+springboot前后端分离实现单点登录跨域问题解决方法

最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

Vue将将后端返回的list数据转化为树结构的实现

相关推荐

随机推荐