本文介绍: 这个方法会传入一个参数,用console.info(val)可知,这是这个主表行的记录,根据主表id查询获取子表记录,用this.$set,将子表list放入主表中。用element–ui 的el–table实现:主表table可实现展开行显示关联的明细表table的列表数据,效果图如下。二.展开行时,会触发 expan-change事件,自定义一个expandChange方法,用于在展开行时加载明细表数据。三.若要同时实现点击主表行展开明细表,需要添加点击行时间。一.开启el–table展开行的功能。
用element–ui 的el–table实现:主表table可实现展开行显示关联的明细表table的列表数据,效果图如下
<el-table
ref="tableData"
v-loading="listLoading"
:data="tableData"
row-key="id"
border
stripe
highlight-current-row
style="width: 100%"
max-height="500"
@row-click="handleRowClick"
@expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.tableDetailData" size="mini" style="width: 95%;margin-left: 8%;">
<el-table-column prop="spotCheckItems" label="点检项目" align="center" />
<el-table-column prop="spotCheckPattern" label="点检类型" align="center" :formatter="formatterSpotCheckPattern" />
<el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
<el-table-column prop="createTime" label="点检日期" align="center" />
</el-table>
<el-col :span="24" class="toolbar">
<el-pagination
style="float: right"
:total="scope.row.detailTotal"
:current-page="detailCurrentPage"
:page-sizes="[5, 10, 20, 30]"
:page-size="detailPageSize"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleDetailSizeChange"
@current-change="handleDetailCurrentChange"
/>
</el-col>
</template>
</el-table-column>
<el-table-column prop="equipmentBarcode" label="设备条码" align="center" />
<el-table-column prop="equipmentName" label="设备名称" width="150" align="center" />
<el-table-column prop="createTime" label="点检日期" for align="center" />
<el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
<el-table-column prop="workorderNo" label="维保工单号" align="center" />
<el-table-column prop="maintainResult" label="维保结果" align="center" />
</el-table>
一.开启el-table展开行的功能
通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.tableDetailData" >
<el-table-column prop="spotCheckItems" label="点检项目" align="center" />
<el-table-column prop="spotCheckPattern" label="点检类型" align="center" :formatter="formatterSpotCheckPattern" />
<el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
<el-table-column prop="createTime" label="点检日期" align="center" />
</el-table>
</template>
</el-table-column>
二.展开行时,会触发 expan-change事件,自定义一个expandChange方法,用于在展开行时加载明细表数据
/** 点击主表格行,获取子表格明细 */
expandChange(row) {
// 设置当前行为选中行
this.$refs.tableData.setCurrentRow(row)
var obj = {
recordId: row.id
}
this.detailListLoading = true
SOPTCHECKRECORDAPI.queryEquipSpotCheckRecordDetailList(obj, this.detailCurrentPage, this.detailPageSize).then(
(res) => {
this.detailListLoading = false
this.$set(row, 'tableDetailData', res.data.records)
this.$set(row, 'detailTotal', res.data.total)
}
)
},
这个方法会传入一个参数,用console.info(val)可知,这是这个主表行的记录,根据主表id查询获取子表记录,用this.$set,将子表list放入主表中。
三.若要同时实现点击主表行展开明细表,需要添加点击行时间
@row-click=“handleRowClick”
// 点击主表行展开明细
handleRowClick(row, event, column) {
// tableData为主表table的ref属性值
this.$refs.tableData.toggleRowExpansion(row)
},
参考文档:
element-ui 中 table表格 展开行 的功能
原文地址:https://blog.csdn.net/weixin_45616483/article/details/131899666
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_18831.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。