element-ui中表格树类型数据的显示

项目场景:

1:非懒加载的情况

1:效果展示


2:问题描述以及解决

1:图片展示

2:html 
<-- default-expand-all  代表默认展开 如果不展开删除就行 -->
<el-tableref="refsTable"v-loading="loading":border="true":data="tableData"style="width: 100%"row-key="billId":header-cell-class-name="tableHeadStyle":tree-props="{children: 'childList',hasChildren: 'undefined',}":cell-class-name="cellStyle":cell-style="{ textAlign: 'center' }":header-cell-style="{ textAlign: 'center' }"default-expand-all><el-table-column label="序号" width="120" prop="index"></el-table-column><el-table-column label="项目编码" width="120" prop=""><template slot-scope="scope"><div class="" v-if="scope.row.parentId==null||scope.row.parentId==''"><el-input v-model="scope.row.projectCode" placeholder="请输入项目编码" /></div></template></el-table-column><el-table-column label="项目名称" prop="billName"  min-width="140"></el-table-column><el-table-columnlabel="合同价"width="120"style="background: #b4de7a"><el-table-column label="工程量"><el-table-column label="单位" prop="unitQuantities"></el-table-column><el-table-column label="数量" prop="quantities"></el-table-column><el-table-column label="单价" prop="billQuantities" fixed="right"></el-table-column></el-table-column><el-table-column label="工作量(万元)" prop="amountWork"></el-table-column></el-table-column>
</el-table>
3:获取数据函数
// 获取表格基本数据getTableData(){this.loading=true;getBillWorks({lineName: this.$route.query.lineName,segmentName: this.$route.query.segmentName,lineId: this.$route.query.lineId,segmentId: this.$route.query.segmentId,segmentBillName: this.$route.query.segmentBillName,lineSegmentName: this.$route.query.lineSegmentName}) .then((res) => {this.loading=false;this.tableData=res.data.data;}).catch(err=>{console.log(err)})},

2:懒加载的情况

1:效果展示:


2:问题描述以及解决

1:图片展示

2:html 
<el-tableref="refsTable"v-loading="loading":border="true":data="tableData"style="width: 100%"row-key="billId":header-cell-class-name="tableHeadStyle":tree-props="{children: 'childList',hasChildren: 'hasChildren',}":cell-class-name="cellStyle":cell-style="{ textAlign: 'center' }":header-cell-style="{ textAlign: 'center' }"lazy:load="loadChildData"><el-table-column label="序号" width="120" prop="index"></el-table-column><el-table-column label="项目编码" width="120" prop=""><template slot-scope="scope"><div class="" v-if="scope.row.parentId==null||scope.row.parentId==''"><el-input v-model="scope.row.projectCode" placeholder="请输入项目编码" /></div></template></el-table-column><el-table-column label="项目名称" prop="billName"  min-width="140"></el-table-column><el-table-columnlabel="合同价"width="120"style="background: #b4de7a"><el-table-column label="工程量"><el-table-column label="单位" prop="unitQuantities"></el-table-column><el-table-column label="数量" prop="quantities"></el-table-column><el-table-column label="单价" prop="billQuantities" fixed="right"></el-table-column></el-table-column><el-table-column label="工作量(万元)" prop="amountWork"></el-table-column></el-table-column>
</el-table>
3:获取数据与子项数据函数
// 获取表格基本数据getTableData(){this.loading=true;getBillWorks({lineName: this.$route.query.lineName,segmentName: this.$route.query.segmentName,lineId: this.$route.query.lineId,segmentId: this.$route.query.segmentId,segmentBillName: this.$route.query.segmentBillName,lineSegmentName: this.$route.query.lineSegmentName}) .then((res) => {this.loading=false;this.tableData=res.data.data;}).catch(err=>{console.log(err)})},// 表格子项数据loadChildData(row, treeNode, resolve) {getBillWorks({segmentId: this.$route.query.segmentId,idPath:row.idPath}).then((res) => {resolve(res.data.data)}).catch(err => {console.log(err)})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/165411.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高速DSP系统设计参考指南(六)锁相环(PLL)

&#xff08;六&#xff09;锁相环&#xff08;PLL&#xff09; 1.模拟锁相环2.数字锁相环3.PLL隔离技术 系统设计人员需要隔离PLL&#xff0c;使其免受内部和外部噪声的影响。PLL通常用作频率合成器&#xff0c;将输入时钟乘以一个整数。该整数是反馈计数器M除以输入计数器N的…

Pytorch搭建DTLN降噪算法

前面介绍了几种轻量级网路结构的降噪做法&#xff0c;本文介绍DTLN—一种时频双核心网络降噪做法。 AI-GruNet降噪算法 AI-CGNet降噪算法 AI-FGNet降噪算法 Pytorch搭建实虚部重建AI-GruNet降噪算法 一、模型结构 DTLN来自[2005.07551] Dual-Signal Transformation LSTM N…

EPLAN_008#3D布局图

一、新建页 多线原理图纸画好以后 打开布局空间导航器——右键——新建 二、插入箱柜 菜单栏——插入——箱柜 三、显示安装板 然后调整视角 四、插入线槽 菜单栏——插入——线槽——选择合适的线槽——确定 按A键可以切换线槽方向&#xff0c;如果位置不对&#xff0c;可以再…

尝试使用jmeter-maven-plugin

前提准备 1、maven项目 2、已安装JMeter、Jenkins、maven、jdk 环境要求&#xff1a; jmeter>5.6.2 maven >3.9 jdk>1.8 Jenkins ? 备注&#xff1a;jmeter-maven-plugin 无需下载&#xff0c;可查阅相关地址&#xff1a;GitHub - jmeter-maven-plugin/jmete…

高效恢复丢失的文件的10 款Android数据恢复工具

在当今快节奏的数字时代&#xff0c;从Android设备丢失重要数据可能是一场噩梦。 您需要一个可靠的恢复工具来取回您的数据&#xff0c;例如令人难忘的照片&#xff0c;重要的联系人&#xff0c;重要的工作文档等。 值得庆幸的是&#xff0c;有许多高效的Android数据恢复工具可…

什么是无磁远传水表?工作原理是怎样的?

无磁远传水表是一种新型的智能水表&#xff0c;与传统水表相比&#xff0c;它具有更高的精度和可靠性&#xff0c;并且可以实现远程读数和控制。那么&#xff0c;无磁远传水表的工作原理是怎样的呢?下面&#xff0c;小编来为大家介绍下什么是无磁水表?它的工作原理是怎样的&a…

npm ERR! node-sass@6.0.1 postinstall: `node scripts/build.js`

1.遇到的问题 vue npm install提示以下错误 2.首次尝试方法 尝试用下面的方式重新安装弄得-saas&#xff0c;结果不起作用 。 npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass npm install node-sass 这时考虑降级node版本&#xff0c;node.js从…

【树莓派触摸屏等学习笔记】

前言 树莓派触摸屏 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、触摸屏硬件驱动 出现黑屏的时候&#xff0c;恢复一下txt config.txt 全屏显示 showFull Exec &#xff1a;自启动 surf 算法 特征点识别 算法的复杂度挺高的 特性树莓派强大…

N-128基于springboot,vue酒店管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis 本系统功…

怎么恢复移走的u盘数据?可以尝试这三种方法

当意外移走U盘上的数据时&#xff0c;我们常常会感到焦虑和失望&#xff0c;特别是当这些数据对我们仍然重要时。不过&#xff0c;您不必完全放弃&#xff0c;因为本文将介绍一些方法&#xff0c;以帮助您恢复U盘上的重要数据。 图片来源于网络&#xff0c;如有侵权请告知 移走…

uniapp 安装 u-view 组件库

u-view 组件库安装教程&#xff1a;https://uviewui.com/components/install.html 注&#xff1a;以下使用 HBuilderx 安装 u-view 2.0 版本&#xff0c;不适用于其它版本。 1.安装 u-view 组件库 2、注册并登录 HBuilderx 账号&#xff0c;点击下载 u-view 组件库。 3、点击…

2024年仁爱学院专升本招生专业对应范围专业目录更新的通知

天津仁爱学院2024年高职升本科招生专业对应范围专业目录 为了更好的进行天津仁爱学院专升本工作&#xff0c;动画专业不分文理进行录取。为了进一步提升录取专业的培养需要&#xff0c;请同学们复习专业课时加强专业课学习&#xff0c;请同学们在报考时关注天津仁爱学院招生章…

Pytorch从零开始实战06

Pytorch从零开始实战——明星识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——明星识别环境准备数据集模型选择开始训练模型可视化模型预测总结 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c;Pytorch2.0.1c…

线性代数3:矢量方程

一、前言 欢迎回到系列文章的第三篇文章&#xff0c;内容是线性代数的基础知识&#xff0c;线性代数是机器学习背后的基础数学。在我之前的文章中&#xff0c;我介绍了梯队矩阵形式。本文将介绍向量、跨度和线性组合&#xff0c;并将这些新想法与我们已经学到的内容联系起来。本…

vmware 16pro安装 mac10.14.6,期间遇到的问题

1、分配硬盘内存尽量分大点&#xff0c;建议是40g&#xff0c;我分了80g&#xff0c;后面下载解压xcode发现还不够&#xff0c;又增加最后分了120g 2、安装过程&#xff0c;卡在选语言的地方&#xff0c;鼠标和键盘无法操作。需要在虚拟机设置中&#xff0c;勾选以下选项“显示…

SpringBoot 打包与运行

一、SpringBoot 程序打包 1、在Springboot工程 pom文件中&#xff0c;引入 spring-boot-maven-plugin 插件。 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifact…

视频SDK开发,多平台SDK快速接入

随着科技的不断发展&#xff0c;视频已经成为了企业业务中不可或缺的一部分。无论是在线教育、企业培训还是产品展示&#xff0c;视频都发挥着至关重要的作用。为了满足企业对视频应用的需求&#xff0c;美摄视频SDK应运而生&#xff0c;为企业提供了一站式的视频解决方案。 一…

[架构之路-240]:目标系统 - 纵向分层 - 应用层 - 应用层协议与业务应用程序的多样化,与大自然生物的丰富多彩,异曲同工

目录 前言&#xff1a; - 倒金子塔结构 - 大自然的组成 一、应用层在计算机系统中的位置 1.1 计算机应用程序的位置 1.1.1 业务应用程序概述 1.1.2 应用程序的分类 - 按照计算机作用范围 1.1.3 业务应用程序分类 - 按照行业分类 1.2 网络应用协议的位置 1.2.1 网络协…

浏览器的四种缓存协议

❤️浏览器缓存 在HTTP里所谓的缓存本质上只是浏览器和业务侧根据不同的报文字段做出不同的缓存动作而已 四种缓存协议如下 Cache-ControlExpiresETag/If-None-MatchLast-Modified/If-Modified-Since &#x1f3a1;Cache-Control 通过响应头设置Cache-Control和max-age&…

React基础: 项目创建 JSX 基础语法 React基础的组件使用 useState状态 基础样式控制

01 React 文章目录 01 React一、React是什么1、React的优势 二、React开发环境搭建1、创建项目2、运行项目3、项目的目录结构 三、JSX基础1、什么是 JSX代码示例&#xff1a; 2、JSX使用场景2.1代码示例&#xff1a; 3、JSX中实现列表渲染4、JSX - 实现基本的条件渲染5、JSX - …