vue antdesign 处理a-tree组件最后一级child为空数组问题

antd中table展开行默认展示,且不需要前边的加号操作 如下所示: 前边不显示+,并且详细信息默认展开 在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开所有行 pagination={{ pageSize: 5 }} //分页器 expandedRowRender={this.exp 立即下载

问题:a-tree数组渲染后台接口数据,但是数据里多了一层空children,多一层children会导致多一个展开符号,页面上看着不太友好
在这里插入图片描述
解决:写个方法,并封装成公共的,方便使用

//我在src/utils文件里新建了一个js文件
export function  handleTreeData(data) {
  for (var i = 0; i < data.length; i++) {
    if (data[i].child.length < 1) {
      data[i].child = undefined; // 看后端返的是child字段还是children字段,自行改变
    } else {
      handleTreeData(data[i].child) // children若不为空数组,则继续 递归调用 本方法
    }
  }
  return data;
}

页面引入并调用

//引入
import { handleTreeData } from '@/utils/treeMethods.js'

//使用
this.goodsClassData = handleTreeData(res.data)
手把手教你用CANopen SDO报文控制步进电机(附CIA402协议详解) 本文详细解析了如何通过CANopen SDO报文控制步进电机,深入讲解CIA402协议的核心架构、状态机模型及对象字典管理,并提供实战代码示例。从SDO报文构造到多轴同步控制,帮助开发者掌握工业级步进电机的精确控制技术,适用于自动化设备开发。 阅读详情

相关推荐

Linux下libdrm实战:从零搭建一个简单的DRM显示程序(附完整代码)

本文是一份Linux下libdrm的实战指南,详细介绍了如何从零开始搭建一个简单的DRM显示程序。通过对比传统Framebuffer的局限性,阐述了现代DRM架构的核心优势与核心对象(FrameBuffer、Plane、CRTC等)的协作流程。文章提供了完整的代码示例,演示了如何打开设备、创建并填充Dumb Buffer、设置CRTC以依次显示红绿蓝纯色画面,并涵盖了编译、运行及进阶开发要点,为嵌入式Linux图形开发提供了扎实的入门基础。

weixin_29183637的博客 406

vue antdesig a-tree组件使用详解

1.首先页面使用 如果使用a-tree组件时报如图错误,就是没有全局引入注册问题: 问题1解决:在main.js里引入并挂载 import {Tree} from 'ant-design-vue' Vue.use(Tree) 2.数据渲染 一般后端返回的数据和组件文档字段对应不上,所以需要自定义一下字段 <a-tree :tree-data='goodsClassData' :replaceFields='replaceFields'> </a-tre

ke_sin的博客 1万+

POST 接口,将参数拼接到 URL 上,而不是将其作为表单数据发送

POST 接口,将参数拼接到 URL 上,而不是将其作为表单数据发送

pig_ning的博客 3143

ant-design-vue 树型table,当子数组为[](空数组)而非null时,控制左侧展开按钮不显示

ant-design-vue 树型table,当子数组为[](空数组)而非null时,控制左侧展开按钮不显示

qq_43225508的博客 1628

YOLOv8环境搭建+训练自己的数据详细项目

直接按照路径会有问题,找到自己 requirements.txt 文件路径,我这里是pip install -r D:\ultralytics-main\ultralytics-main\requirements.txt。首先去自己的anaconda的安装的envs(虚拟环境),在导航栏输入cmd,进入命令窗口。到官方网站下载yolo模型 ,下载好后解压,里面有个文件requirements.txt。然后安装ultralytics ,这是必须的。

m0_63172128的博客 2万+

NPP/VIIRS夜间灯光数据:从下载到应用的完整指南

本文提供了NPP/VIIRS夜间灯光数据从下载、处理到应用的完整实战指南。详细介绍了如何从官方源获取数据、解读文件结构、进行坐标校正与数据清洗,并深入探讨了其在城市扩张监测、社会经济指标估算、重大事件影响评估等领域的核心应用。文章旨在帮助研究者与从业者快速掌握这一强大的空间数据,将其转化为研究中的实用工具。

gpu4optimizer的博客 862

antd 表格内嵌children,且不展示第一列加号

antd 表格内嵌children,children有数据就默认展开,且不展示第一列加号

friend_ship的博客 2313

GraphRAG + Ollama 本地化部署实战:从零搭建知识图谱问答系统

本文详细介绍了如何在本地部署GraphRAG与Ollama,搭建一个完全自主可控的知识图谱问答系统。通过逐步指导环境配置、项目初始化、核心设置修改以及源码适配,成功将GraphRAG从依赖云端OpenAI API转向本地Ollama服务,并选用qwen2.5:7b和nomic-embed-text模型。该方案有效解决了数据隐私与持续API成本问题,特别适合中小企业构建内部知识库或智能客服系统。

x2y3z4a5b的博客 918

Element ui tree 组件 获取到所有最后一级的节点

获取tree组件中被选中的最后一级的节点 需要获取 被选中的所有节点 <el-tree :data="data" show-checkbox default-expand-all ...

Happy Today 9546

Hopf振荡器在机器人步态控制里到底怎么用?一个CPG仿生案例说清楚

本文深入解析了Hopf振荡器在机器人步态控制中的实际应用,通过CPG仿生案例详细展示了从数学方程到关节指令的完整流程。重点探讨了Hopf振荡器的极限环稳定性、参数调节技巧及自适应控制策略,为机器人运动控制提供了高效解决方案。

weixin_29284657的博客 200

基于STM32+RFID设计的宿舍检修管理系统

设计一个上位机,用来管理查看维修检修信息,当维修寝室的设备或者检修完成时,通过STM32上的RC522刷一下这个寝室的IC卡,识别这是哪个寝室,识别成功后在软件上弹出一个对话框,填写本次维修或者检修的事件,填写完毕点击提交即可。...

2555

ant-desigenVue-3.x a-tree-select,点击父节点展开子节点(懒加载)

1.看官网TreeSelect的api。

qq_41308779的博客 868

Oracle EBS GL日记账批“选定以过账”状态数据修复

日记账来源:应收账款。用户操作过账以后,自动提交请求“过账:单一分类账”一直运行中,该请求执行5,6个小时甚至10多个小时无法完成,导致“标准管理器”阻塞大量请求待定,“冲突解决管理器”的待定数量不断增加。系统管理员不得不把该请求强制取消,此时,日记账批的状态处于“选定以过账”(GL_JE_BATCHES.STATUS为S),如下图 检查此日记账批有3千多条日记账题头,由于日记账比较多,日记账的科目余额计算需要大量服务器资源和执行时间比较长。

陈显平的专栏-Oracle EBS 3245

树 获取树的层级信息

需求背景: 基于叶子节点获取其顶级节点、二级节点。。。 节点存储父节点CODE 分析实现: for循环 查询数据库不可取 先将数据全部查询出 以节点CODE作为key,节点数据做为value 封装为Map结构数据 以叶子节点为起点 ,获取其父级节点 ,遍历查询,注意死循环问题 逻辑实现: 采用 public static Stack<Product> collectProductHierarchyInfo(String productPk, Map&lt...

xiangwang2016的博客 2045

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

Ant Design Vue遍历树形数据,删除其空children项

1.ui组件:Ant Design Vue。 2.问题复现:返回数据中,包含空数据的children,使得最后一项没有子节点的数据前出现“+”的图标。 3.实现结果: 4.代码 返回结果 let data=[{ label: '一级 1', children: [{ label: '二级 1-1', children: [] }] }] js方法 deleteChildren(arr) { l

故里的博客 1738

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

【vue】遍历树形数据,删除其空children项

方法来自:前端青音 编写联级选择器的时候发现, 如果树中有空children也是显示空选项, 所以需要去掉有空children项中的children: data let arr2=[{ label: '一级 1', children: [{ label: '二级 1-1', children: [] }] }, { label: '一级 2', .

栀妹儿的炼丹炉 3506

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

vue+Ant design使用a-table

vue+Ant design使用a-table 今天遇到一个需求是 组件中有多个a-table(v-for循环出的),但是多个a-table的选项,只能选择一个 <a-table :columns="columns" :data-source="dataSource" rowKey="UUID" :pagination="false" :rowSelection="{selectedRowKeys:selectedRowKeysArray,onChan

m0_52948787的博客 3360

树结构

文章目录Q1:AVL 树——(平衡二叉查找树)Q2:红黑树]——(对称二叉B树 ,O(logn))Q3:AVL 树、红黑树区别Q4:B 树、B+ 树区别 Q1:AVL 树——(平衡二叉查找树) AVL 树是平衡二叉查找树,增加和删除节点后通过树形旋转重新达到平衡。 右旋:是以某个节点为中心,将它沉入当前右子节点的位置,而让当前的左子节点作为新树的根节点,也称为顺时针旋转。 左旋:是以某个节点为中心,将它沉入当前左子节点的位置,而让当前的右子节点作为新树的根节点,也称为逆时针旋转。 Q2:红黑

咸粥的博客 733

js遍历一个数组如果有children就向children中添加新的属性并且返回新的数组

【代码】js遍历一个数组如果有children就向children中添加新的属性并且返回新的数组。

LRQQHM的博客 1485

el-cascader级联选择器当子节点的children为空数组的话,有bug(前端解决办法)

el-cascader级联选择器当子节点的children为空数组的话,有bug(前端解决办法)

weixin_38345306的博客 1968

Vue中使用vue-table-with-tree-grid表格插件

一、下载 cnpm i -S vue-table-with-tree-grid 二、全局引入 import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table', TreeTable) 三、使用 <template> <div> <el-card> <tree-table :border="true" :show

820

Ant Design Vue 之a-tree-select

Ant Design Vue 是比较流行的vue框架之一,主要是展示a-tree-select 的简单用法,a-tree-select组件主要用于展示树结构的选择。

qq_40263927的博客 5307

js数组删除children为空(el-cascader)

options: [ { value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [] }, { value: 'daohang', label: '导航', children: [] }] } ], cascaderList(){ function fn(.

九亿宅男的梦的博客 1161

[Vue-Treeselect Warning] Unloaded branch node detected. “loadOptions“ prop is required to load its

使用Vue treeselect时出现了[Vue-Treeselect Warning] Unloaded branch node detected. “loadOptions” prop is required to load its children.错误。 原因是treeselect需要的数组children如果为空,应该直接把这个children属性去掉,否则就会报上述错误。 而后端传递过来的数据中,当children为空时,赋值为null,所以导致了报上述的错误。 解决方案:在treeselect

qq_40600379的博客 7419

前端——》ant-design-vue组件的使用之三(a-table表格的行列合并)

效果 代码 表头列合并 columns = { title: node.date, dataIndex: node.date, key: node.date, width: 260, children: [ { title: '上午', dataIndex: node.d

叙传 3265

关于ant design Table嵌套子表单,展开父表单多了空白行

关于ant design Table嵌套子表单,展开父表单多了空白行 在官方文档中可以发现在展示树形结构时当dataSource中存在chinldren字段会显示树形结构,所以在需要嵌套子表格时,需要将dataSource中的children字段修改或者删除(根据需求) 我在处理时将children字段修改为newChildren就不会出现这种情况了 ...

weixin_44435652的博客 1186
上一篇: Ant Design Vue form select组件结合labelInValue属性出现的问题
下一篇: vue antdesig a-tree组件使用详解
@小手冰凉儿
博客等级 码龄7年 23粉丝 41原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值