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.mzph.cn/news/113161.shtml

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

相关文章

Linux_Shell运行原理(命令行解释器)

一般我们叫Linux操作系统&#xff0c;狭义上就是指Linux内核&#xff08;kernel&#xff09;&#xff0c;广义上就是Linux内核Linux外壳程序对应的配套程序&#xff0c;这里我们来详细介绍一下这个“外壳程序”。 在我们使用指令时&#xff0c;这个外壳程序会将我们的解释指令并…

【Arduino TFT】基于 ESP32S3 S7789 240x240 TFT实现的龙猫太空人天气时钟

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-10-21 ❤️❤️ 本篇更新记录 2023-10-21 ❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64…

【趣味随笔】农业机器人的种类与发展前景

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

关于Mysql中的索引与事务

索引 定义 索引&#xff1a;为了提高查找效率而使用的一种数据结构把数据组织起来&#xff0c;可以把索引理解在书的目录或字典的检索表&#xff08;拼音检索&#xff09; 索引是一种特殊的文件&#xff0c;可以包含着对数据表里的所有记录的引用指针&#xff0c;对表中的一…

重磅发布!RflySim Cloud 智能算法云仿真平台亮相,助力大规模集群算法高效训练

RflySim Cloud智能算法云仿真平台&#xff08;以下简称RflySim Cloud平台&#xff09;是由卓翼智能及飞思实验室为无人平台集群算法验证、大规模博弈对抗仿真、人工智能模型训练等前沿研究领域研发的平台。主要由环境仿真模块、物理效应计算模块、多智能体仿真模块、分布式网络…

代码随想录Day24 LeetCode T491 递增子序列 LeetCode T46 全排列 LrrtCode T47 全排列II

LeetCode T491 递增子序列 题目链接:491. 递增子序列 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 首先这里的测试用例很容易误导我们,这道题不能使用上次子集的思路对数组先排序,使用一个used数组来解决问题. 我们用[4,7,6,7]举例这道题的递增序列不存在[4,6,7,7]这个…

合同管理系统

合同管理系统 功能介绍&#xff1a; 功能特性&#xff1a; 根据对合同管理系统系统分析合同管理由以下模块组成&#xff0c;相对方管理、合同文本管理、合同审批管理、合同履行审批、风险事件管理、合同查询、合同统计、系统提醒、系统管理。 1、相对方管理 1.有“相对方…

SpringBoot环境搭建与初创程序

一&#xff1a;IDEA环境准备 IDEA社区版版本: 2021.1-2022.1.4 IDEA专业版版本: 无要求 &#x1f31f;如果个人电脑安装的IEDA不在这个范围&#xff0c;需要卸载重新安装&#xff1b;且⼀定要删除注册表 参考文章➜IDEA卸载和删除注册表 二&#xff1a; Maven (1)Maven的概念…

第六届“中国法研杯”司法人工智能挑战赛进行中!

第六届“中国法研杯”司法人工智能挑战赛 赛题上新&#xff01; 第六届“中国法研杯”司法人工智能挑战赛&#xff08;LAIC2023&#xff09;目前已发布司法大模型数据和服务集成调度 、证据推理、司法大数据征文比赛、案件要素识别四大任务。本届大赛中&#xff0c;“案件要素…

克隆的虚拟机,查不到IP号

文章目录 问题解决描述解决步骤重新生成MAC地址修改一修改二 相关操作查看当前所有网卡修改网络配置文件文件内容修改修改文件名 问题解决 描述 使用克隆的虚拟机&#xff0c;网卡和原虚拟机的相同&#xff0c;会导致克隆虚拟机的网卡不可用&#xff0c;从而使用ip addr查看不…

上新啦!请查收云原生虚拟数仓 PieCloudDB 十月动态

PieCloudDB Database 最新动态 PieCloudDB 压缩效率得到提升 为了节省存储空间&#xff0c;降低用户存储费用&#xff0c;PieCloudDB 在压缩率上不断优化&#xff0c;包括&#xff1a; 对 HLL&#xff08;HyperLogLog&#xff09;支持游程编码&#xff08;Run Length Encodi…

Visual Studio2019 与 MySQL连接 版本关系

Refer: VS 连接MySQL | mysql-for-visualstudio 的安装-CSDN博客 【精选】用VS2019&#xff08;C#&#xff09;连接MYSQL(从0入门&#xff0c;手把手教学&#xff09;_mysql-for-visualstudio-1.2.9.msi_Flying___rabbit的博客-CSDN博客 一、工具&#xff1a;VS2019需要连接M…

Qt 官方文档及阅读方法

文章目录 选择 All Qt Modules 查找模块选择 C Classes 查看该模块的所有的类当前类说明文档 QT 官方文档参考&#xff1a;https://doc.qt.io/qt-5 选择 All Qt Modules 查找模块 选择 C Classes 查看该模块的所有的类 当前类说明文档 包括 属性公共函数重新实现的公共功能公…

巡检管理系统哪一款简单实用?如何解决传统巡检难题,实现高效监管?

在电力、燃气、水务等公共服务领域&#xff0c;线路巡检工作是保障公众安全、避免事故发生的重要环节。然而&#xff0c;传统的巡检方式存在一些显著的问题&#xff0c;可能会对公共安全和稳定运行产生不利的影响。为了解决这些问题&#xff0c;需要一种能够实现高效、精准的线…

SystemVerilog学习(1)——验证导论

写在最前 选课不慎&#xff0c;选修课选了个SystemVerilog&#xff0c;事情比必修还多&#xff0c;上课老师讲的一点用没有&#xff0c;但是学分还得修&#xff0c;只能自学了&#xff0c;既来之则安之。 一、什么是SystemVerilog SystemVerilog简称为SV语言&#xff0c;是一种…

react native 使用夜神模拟器开发调试 windows+android

执行adb devices, 提示List of devices attached 打开本地sdk目录中的platform-tools文件夹&#xff0c;复制下面3个文件 打开夜神模拟器安装目录中的bin目录&#xff0c;把复制出来的文件复制替换到bin目录中 在复制一份platform-tools目录中的adb.exe&#xff0c;重命名为…

python基础教程:递归函数教程

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 1.递归的定义&#xff1a; 在函数内部直接或者间接调用函数本身 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ python源码、视频教程、插件安装教程、资…

四川云汇优想:短视频矩阵运营方案

短视频矩阵运营方案是为了提高短视频平台的用户黏性和活跃度&#xff0c;从而增强用户粘性和平台的商业价值而制定的。下面四川百幕晟小编将对短视频矩阵运营方案进行详细的介绍和分析。 首先&#xff0c;短视频矩阵运营方案要注重用户精细化运营。通过用户画像和兴趣标签&…

Mysql 中的性能调优方法

Mysql 性能调优方法可以从四个方面来说&#xff0c;分别是&#xff1a; 表结构与索引 SQL 语句优化 Mysql 参数优化 硬件及系统配置 这四个方面的优化成本和优化效果是成反比的。 表结构和索引的优化 表结构和索引的优化&#xff0c;主要可以下面这些方面去优化&#xff1a; 分…

JVM第十六讲:调试排错 - Java 线程分析之线程Dump分析

调试排错 - Java 线程分析之线程Dump分析 本文是JVM第十六讲&#xff0c;Java 线程分析之线程Dump分析。Thread Dump是非常有用的诊断Java应用问题的工具。 文章目录 调试排错 - Java 线程分析之线程Dump分析1、Thread Dump介绍1.1、什么是Thread Dump1.2、Thread Dump特点1.3、…