首页 > 其他分享 >VUE后台获取数据,并将数据递归为树接口所需数据形式

VUE后台获取数据,并将数据递归为树接口所需数据形式

时间:2024-03-12 13:55:33浏览次数:23  
标签:VUE item res 为树 获取数据 token id getroomtreedata

后台获取数据形式 (parentID=0的是父级,parentID不为0的,如果parentID与某个对象中的id相等,则表示为该对象的子级。)

 代码转换:

<script>  
var roomMenuDataL;//后台获取的教室数据
methods: {
    //获取教室树
    getroommenu() {
      const token = this.$cookieTools.getToken();
      //获取token
      const getmenuurl = "/usiop/sysroomtree/usedittreeselect?token=" + token;
      this.$myaxios.post(getmenuurl).then((res) => {
        // console.error(res);
        if (res.result == 0 && res.data.length > 0) {
          roomMenuDataL=res.data;
          //调用方法进行数据转换为childern形式
          this.roomMenuData = this.$options.methods.getroomtreedata("-1");
          console.error(this.roomMenuData);
        } else {
        }
      });
    },
// 将数据递归转换 getroomtreedata: function (pid) { const child = roomMenuDataL.filter((item) => item["pId"] === pid); return child.map((item) => { if (this.getroomtreedata(item.id).length > 0) { return { ...item, payType: [1], label: item.className, value: item.id, children: this.getroomtreedata(item.id), disabled: true, }; } else { return { ...item, payType: [1], label: item.className, value: item.id, disabled: false, }; } }); }, }, </script>

 转换成功:

 

标签:VUE,item,res,为树,获取数据,token,id,getroomtreedata
From: https://www.cnblogs.com/ZhuMeng-Chao/p/18068154

相关文章

  • vue3 keepalive 失效
    好久没更新博客了,重复拧螺丝keepalive之前用过,但是好久了,所以这次遇到问题觉得有点新颖我遇到的问题是在路由里面设置子路由,子路由的router-view设置keepalive不生效的问题 之前用了keep-alive没有用v-slot因为router-view就是一个单独的组件,他的本质并不是使用url对应的组......
  • Vue学习笔记46--scoped样式 + less
    scoped样式<!--组件的默认样式css写法--><!--<stylescoped>.demo{background-color:cadetblue;}</style>--><stylelang="less"scoped>.demo{background-color:cadetblue;.myfontsize{font-size:40px;}......
  • Vue3自定义指令实现权限控制
    使用Pinia(Vue.js的轻量级状态管理库,是Vuex的替代品)来管理用户权限,并结合自定义指令控制元素的显隐。步骤操作如下:1、安装Pinia:npminstallpinia或yarnaddpinia解释:安装Pinia库,这是一个轻量级的状态管理库,适用于Vue3。2、创建PiniaStore://stores/user.jsimport{......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • 创建一个vue项目
    1.使用vite创建项目npmcreatevite@latest2.替换main.js//从Vue.js框架中导入createApp函数。createApp是用来创建Vue应用的函数。import{createApp}from'vue'//导入一个CSS文件,这个文件包含了应用程序的样式信息。'./style.css'表示这个CSS......
  • webpack.config.js和vue.config.js的区别
    webpack.config.js 和 vue.config.js 是两个不同的配置文件,用于配置不同的工具和框架webpack.config.js:用途:这是webpack的配置文件,用于配置和定制webpack构建过程的各个方面,包括入口文件、输出目录、模块加载器、插件等。适用范围:适用于所有基于webpack的项目,不仅......
  • vue3—尚硅谷禹神笔记转载
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快5......
  • Vue — 插槽
    一、默认插槽:默认插槽是最常见的插槽类型。它允许我们在组件中插入任意内容,并且如果没有指定具名插槽,则会将内容插入到默认插槽中。//子组件<template><div><h1>组件标题</h1><slot></slot></div></template>//父组件<template><div><h1>组件标......
  • Vue — v-load封装 loading效果
    <template><divclass="app"><divclass="box"v-load="isLoading"><ul><liv-for="(item,index)inlist":key="index">{{item.name}}&l......
  • 一文告诉你Vue的事件处理
    Vue事件处理使用v-on指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。methods承载多是事件函数v-on可以用@替换用法v-on:click="methodName"或@click="methodName"事件处理器的值可以是:内联事件处理器:事件被触发时执行的内联JavaScri......