当前位置: 首页 > news >正文

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.lryc.cn/news/198661.html

相关文章:

  • 【扩散模型】如何用最几毛钱生成壁纸
  • 零基础Linux_17(进程间通信)VSCode环境安装+进程间通信介绍+pipe管道mkfifo
  • Redis的BitMap使用
  • java并发编程之基础与原理1
  • ⟨A⟩ = Tr(ρA) 从数学上来讲什么意思
  • Vue中的v-model指令的原理是什么?
  • 2023服务端测试开发必备技能:Mock测试
  • ExoPlayer架构详解与源码分析(5)——MediaSource
  • 控制一个游戏对象的旋转和相机的缩放
  • 【数据结构】线性表(二)单链表及其基本操作(创建、插入、删除、修改、遍历打印)
  • label的作用是什么?是怎么用的?(1)
  • C- 使用原子变量实现自旋锁
  • 汇编的指令
  • 《数据结构、算法与应用C++语言描述》使用C++语言实现数组队列
  • 零基础如何学习自动化测试
  • 系统架构师备考倒计时16天(每日知识点)
  • 【MySQL系列】- Select查询SQL执行过程详解
  • 软考高级信息系统项目管理师系列之:信息系统项目管理师论文评分参考标准
  • MyBatis--多案例让你熟练使用CRUD操作
  • 用Python造轮子
  • ARM 堆栈寻址类型区分
  • 每日一练 | 网络工程师软考真题Day43
  • jsonXML格式化核心代码
  • PTQ量化和QAT量化
  • 【Django 02】数据表构建、数据迁移与管理
  • 一天吃透Java集合面试八股文
  • 高级深入--day36
  • Jmeter接口测试工具的一些使用小技巧
  • 黄金眼PAAS化数据服务DIFF测试工具的建设实践 | 京东云技术团队
  • 深入了解RPA业务流程自动化的关键要素