后端返回数据中最后一级带有空的children

最新推荐文章于 2024-01-12 18:47:40 发布
最新推荐文章于 2024-01-12 18:47:40 发布
阅读量153 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64372719/article/details/131509767
版权

js中删除后端返回的多余children ，去适应el-cascader组件 

  removeEmptyChildren(node) {

      node.forEach(item => {

        if ('children' in item && item.children.length === 0) {

          delete item.children

        } else if ('children' in item && item.children.length) {

          this.removeEmptyChildren(item.children)

        }

      })

      return node

    },

阿程778
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-cascader 级联选择器 数据为空显示问题
King Saj
12-22 2378
问题描述: 接口请求完数据,出现如下效果,排查发现当最后一级children:[],为空导致这种请求 解决办法: 使用递归处理数据,去除children:[]为空的属性,即可 1: 创建文件 @/utils/treeData html结构 el-cascader配置 <el-cascader class="mb10 mt10" v-model="deptOptions" clearable fi
el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数
anny_mei的博客
12-07 2225
效果图 我们的数据格式 因为我们的字段和官网提供的字段完全不同,所以需要转换 上代码 <el-cascader ref="lazytree" :show-all-levels="false" :options="treeData" :props="defaultProps" :key="isResouceShow" @chan
Element UI 中Cascader 级联选择器去除最后一级空数组
小破孩的博客
08-31 1509
// 递归判断列表，把最后的children设为undefined getTreeData(data) { for (var i = 0; i < data.length; i++) { if (data[i].node.length < 1) { // children若为空数组，则将children设为undefined data[i].node = undefined; } els.
解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
m0_70547044的博客
02-05 3150
el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
el-cascader级联展开时,无法定位到子节点,去除末节点的children
蜗牛快爬
06-29 2585
前端替换字符串的效率还是很高,所以不用过于担心会影响效率,当然数据量很大的话最好在后台处理.
vue篇-组件访问,父访问子($children、$refs),子访问父($parent、$root)
liumuye88888的博客
05-31 246
父访问子 1.$children默认是一个空数组 2.$refs,对象类型,默认是一个空对象(要给子组件一个ref属性) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi
省市区带有id，children的三级联动js或json
03-30
可自行转成json，三级联动，children
JAVA后台转换成树结构数据返回给前端的实现方法
08-19
在软件开发中，树形结构数据是一种常见的数据结构，它广泛应用于各种应用程序中，如文件系统、组织结构、菜单系统等。然而，在实际开发中，我们经常会遇到如何将后台的树形结构数据返回给前端的问题。本文将介绍如何...
Vue拿到后端返回的List，渲染出element-tree树结构
01-08
这是我的做法，基本上是搬运官方的办法照葫芦画瓢，我也不知道有没有更好的方法能拿到 tree组件的实例 element-tree 增加节点的方法 如果在模板中定于了 的数据源如下： 那么在当前Vue组件实例中定义并初始化数据...
JS实现动态生成表格并提交表格数据向后端
11-24
在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...
谈谈Jquery中的children find 的区别有哪些
11-22
expr是表达式，可选参数，所有选择器中的表达式都可以用在这，比如按标签名”div”,按类名”.class”,按序号”:first”等等，如果表达式为空，那么返回的是所有的孩子，返回的结果仍为jQuery对象。  二、Jquery中...
vue element tree 返回数组最后一级children是【】
snow_living的博客
03-16 372
vue element tree 返回数组最后一级children是【】，组件无法选中，做个循环处理 ，
【Vue】 vue-Router children 子组件空白显示，没有内容
星辰大海
10-10 2674
场景： 打算访问 /parent/child1 和 /parent/child2 ，但产生问题是：子页面一直空白显示 # route.js 产生问题示例 { path: '/parent', children: [{ path: 'child1', component: () => import('@/pages/network/child1'), },{ path: 'child2', component: ()
vue父组件接受子组件传递的数组有值但是为空的那些事儿
Arange_的博客
04-29 1629
今天用组件通信时遇到一个问题，就是父组件在接受子组件传递的值的时候，是可以打印出东西来的而且值也没有错，但是length为0，并且接下来的处理中用这个数组是为空的，如图： 如图片中展示我的数据是可以打印的，但是走接口的时候却是空数组： 我尝试的方法： 1、将代码放入setTimeout 失败 2、将代码放入$nextTick 失败 3、用watch监听子组件传入的值 失败 也考虑过是不是父子组件生命周期的问题，然后用v-if试了一下也是失败， 最后把我的参数全部拷贝了一份出来是可以的，但JSON.stri
JavaScript：正则表达式去掉空的children
1111111111
12-14 321
使用ant design vue的级联选择，后端返回的数据包含了空的children，导致前端下拉选项中有空白项，使用正则表达式可以去掉空的children。 var jsondata = JSON.parse(JSON.stringify(res.result).replace(/\"children"\:\[]/g, "\"no\":0")); ...
封装一个js方法，遍历树结构，当节点的children为空时，删除children
weixin_57099959的博客
09-13 1791
一般开发中很少会直接修改原数组，因此我用map遍历，加上递归的方法实现这个功能。 <script> var tree = [{ a: 1, b: 1, children: [{ a: 111, children: [] }] }, .
【vue】遍历树形数据，删除其空children项
栀妹儿的炼丹炉
10-13 3150
方法来自：前端青音 编写联级选择器的时候发现， 如果树中有空children也是显示空选项， 所以需要去掉有空children项中的children： data let arr2=[{ label: '一级 1', children: [{ label: '二级 1-1', children: [] }] }, { label: '一级 2', .
递归去除树状最后一层为空的children
weixin_44022586的博客
04-05 2407
使用场景：多级级联最后一级chidren数据给了数组，要做的是删掉空children，否则最后一级会出现空白但是又一直展示 原数据：{ label:1, value:1, children:[ { label:2, value:2, children:[] } , { label:2, value:2, children:[] } ] } 处理之后：子节点为空没了 { label:1, value:1, children:[ { label:2, value:2 } , { label:2, value:2
Elementui 组件库中的 Cascader 级联选择器绑定数据 及 级联选择器实现单/多选最后一级
qq_37675009的博客
01-12 1588
Elementui 组件库中的 Cascader 级联选择器绑定数据 及 级联选择器实现单/多选最后一级
el-cascader后端返回数据格式
最新发布
03-18
el-cascader后端返回的数据格式是一个包含多个对象的数组。每个对象代表一个级联选择器的选项，包含以下属性： - key：表示当前选项的唯一标识符。 - label：表示当前选项的显示文本。 - children：表示当前选项的子...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值