场景描述：如下图所示，我们需要点击 ‘账单生成’ 按钮，然后里边要展示一个下图这样的表格。

最主要的是如何展示表格中的内容，一起看看吧！

---

<template><!-- 水费 欠费--><el-dialog title="水费欠费账单生成" :visible.sync="dialogVisiblePrint"><div id="printTest"><div style="text-align: center;"><h3>水费付款通知单</h3></div><div style="margin: 22px;"><el-descriptions title="" :column="2" style="font-size: 15px;"><el-descriptions-item label="业主/住户名称">{{waterInfo.lodgerName}}</el-descriptions-item><el-descriptions-item label="通知书编号Invoice No"></el-descriptions-item><el-descriptions-item label="客户单元Unit No">{{getLocationName(waterInfo.locationId)}}/{{getTowerName(waterInfo.towerId)}}/{{getFloorName(waterInfo.floorId)}}层</el-descriptions-item><el-descriptions-item label="发单日期Lssue Date">{{waterInfo.yearToMonth}}</el-descriptions-item><el-descriptions-item label="计费面积Charge Area(m²)"></el-descriptions-item><el-descriptions-item label="收款终止日期Due Date">{{waterInfo.yearToMonth}}</el-descriptions-item></el-descriptions></div><div style="margin: 18px;"><el-table :data="waterData" border><el-table-column prop="feeName" label="收费项目" align="center"></el-table-column><el-table-column prop="yearToMonth" label="缴费期间" align="center"></el-table-column><el-table-column prop="unitPrice" label="单价(元)" align="center"></el-table-column><el-table-column prop="meterReading" label="上期读数" align="center"></el-table-column><el-table-column prop="readingAccuracy" label="本期读数" align="center"></el-table-column><el-table-column prop="totalMoney" label="本期应交金额" width="120px" align="center"></el-table-column></el-table></div><div style="margin: 22px;"><h4>物业服务中心盖章(Seal of Property Service Center)</h4></div></div><div style="text-align: center;"><el-button type="success" v-print="'#printTest'">打印</el-button><el-button type="primary" @click="dialogVisiblePrint = false">取消</el-button></div></el-dialog></div>
</template><script>import API from "@/components/common/newApi";export default {data() {return {/* data:[]后端获取到的数据列表。option表格配置项.form 表单*/form: {},query: {},areaList: [], //所属区域towerList: [], //所属楼栋floorList: [], //所属楼层dialogVisiblePrint: false,waterInfo: {}, //水费对象waterData: [],}},mounted() {//获取所属区域this.getLocationList()//获取所属楼层this.getFloorList()//获取所属楼栋this.getTowerList()},methods: {//水费欠费账单生成async printOpen(row) {this.dialogVisiblePrint = truelet data = {waterBillId: row.waterBillId,type: "1",}//在接口访问之前给 水费 赋值为空this.waterData = []await API.arrearsNoteInfo(data).then(res => {if (res.data.code == 0) {//水费绑值this.waterInfo = res.data.data.ctyWaterBillInfo//水费欠费表格数据let waterList = res.data.data.ctyWaterBillInfo;this.waterData.push(waterList)}});},// 获取所属区域getLocationList() {API.getAreaList().then((res) => {if (res.data.code == 0) {this.areaList = res.data.data;}});},//根据区域id获取对应的中文getLocationName(id) {let namethis.areaList.map(item => {if (item.id == id) {name = item.locationName}})return name},// 获取所属楼栋getTowerList(locationId = "") {let params = {data: {locationId: locationId,},pageNum: 1,pageSize: 1000,};API.getTowerList(params).then((res) => {if (res.data.code == 0) {this.towerList = res.data.data.list;}});},//根据楼栋id获取对应的中文getTowerName(towerId) {let towerNamethis.towerList.map(item => {if (item.towerId == towerId) {towerName = item.name}})return towerName},// 获取所属楼层getFloorList(towerId = "") {let params = {data: {towerId: towerId,},pageNum: 1,pageSize: 1000,};API.getFloorList(params).then((res) => {if (res.data.code == 0) {this.floorList = res.data.data.list;}});},//根据楼层id获取对应的中文getFloorName(floorId) {let floorNamethis.floorList.map(item => {if (item.floorId == floorId) {floorName = item.floorNo}})return floorName},}}
</script><style>
</style>

---

el-descriptions标签 (描述列表)：列表形式展示多个字段。

column： 一行 DescriptionsItem 的数量 (即：一行多少列)，number类型

  重点代码

 

---

 效果图：