element-ui中表格树类型数据的显示-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
项目场景
1非懒加载的情况
1效果展示
2问题描述以及解决
1图片展示
2html
<-- default-expand-all 代表默认展开 如果不展开删除就行 -->
<el-table
ref="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-column
label="合同价"
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图片展示
2html
<el-table
ref="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-column
label="合同价"
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)
})
},
