el-table实现嵌套表格的展示

需求

一个表单中存在子表
在这里插入图片描述
列表返回格式

实现

实现思路

el-table中在嵌套一个el-table，这样数据格式就没问题了，主要就是样式

将共同的列放到一列中，通过渲染自定义表头render-header，将表头按照合适的宽度渲染出来

 <el-table-columnprop="table"label="子表"class-name="has-child":render-header="renderHeader":width="childColumn.length * 120 + 2 + 'px'"><template slot-scope="scope"><el-tableborder:data="scope.row.details"class="child-table":show-header="false"><el-table-columnprop="startDate"align="center"label="起始日期"width="120px"></el-table-column><el-table-columnprop="endDate"align="center"label="结束日期"width="120px"></el-table-column><el-table-columnprop="applyDay"align="center"label="申请天数"width="120px"></el-table-column><el-table-columnprop="destination"align="center"label="目的地"width="120px"></el-table-column><el-table-columnprop="transportation"align="center"label="交通方式"width="120px"></el-table-column><el-table-columnprop="businessTripReason"align="center"label="出差事由"width="120px"></el-table-column><el-table-columnprop="returnDate"align="center"label="返程日期"width="120px"></el-table-column><el-table-columnprop="actualDay"align="center"label="实际出差天数"width="120px"></el-table-column><el-table-columnprop="subsidyDay"align="center"label="差补天数"width="120px"></el-table-column><el-table-columnprop="remark"align="center"label="备注"width="120px"></el-table-column></el-table></template></el-table-column>

根据数据渲染表头

      childColumn: [{label: "起始日期",width: "120px",},{label: "结束日期",width: "120px",},{label: "申请天数",width: "120px",},{label: "目的地",width: "120px",},{label: "交通方式",width: "120px",},{label: "出差事由",width: "120px",},{label: "返程日期",width: "120px",},{label: "实际出差天数",width: "120px",},{label: "差补天数",width: "120px",},{label: "备注",width: "120px",},],/*** @description 渲染子表*/renderHeader(h, { column, $index }) {const childTable = this.childColumn.map((item) => {return h("div",{style: {width: item.width,padding: "0 10px",textAlign: "center",flexShrink: 0,flexGrow: 0,},},item.label);});return h("div",{class: ["child-head"],},childTable);},

调样式，慢慢调到合适就行

.has-child {padding: 0px !important;// display: none;& > .cell {padding: 0 !important;}::before {height: 0;}.child-table {background-color: transparent;.cell{line-height: 34px;}}.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {background-color: transparent;}.el-table__body tr.current-row > td.el-table__cell,.el-table__body tr.selection-row > td.el-table__cell {background-color: transparent;}tr {background-color: transparent;}.child-head {display: flex;}
}

完整代码

<template><div><Search :config="searchConfig" @search="search"><el-button type="primary" @click="addItem" icon="el-icon-plus">新增</el-button></Search><el-tableborder:data="tableData"v-loading="loading"class="el-child-table"><el-table-columnprop="applyDate"label="申请日期"align="center"width="120px"></el-table-column><el-table-columnprop="nickName"label="申请人"align="center"width="140px"></el-table-column><el-table-columnprop="deptName"label="申请部门"align="center"width="120px"></el-table-column><el-table-columnprop="table"label="子表"class-name="has-child":render-header="renderHeader":width="childColumn.length * 120 + 2 + 'px'"><template slot-scope="scope"><el-tableborder:data="scope.row.details"class="child-table":show-header="false"><el-table-columnprop="startDate"align="center"label="起始日期"width="120px"></el-table-column><el-table-columnprop="endDate"align="center"label="结束日期"width="120px"></el-table-column><el-table-columnprop="applyDay"align="center"label="申请天数"width="120px"></el-table-column><el-table-columnprop="destination"align="center"label="目的地"width="120px"></el-table-column><el-table-columnprop="transportation"align="center"label="交通方式"width="120px"></el-table-column><el-table-columnprop="businessTripReason"align="center"label="出差事由"width="120px"></el-table-column><el-table-columnprop="returnDate"align="center"label="返程日期"width="120px"></el-table-column><el-table-columnprop="actualDay"align="center"label="实际出差天数"width="120px"></el-table-column><el-table-columnprop="subsidyDay"align="center"label="差补天数"width="120px"></el-table-column><el-table-columnprop="remark"align="center"label="备注"width="120px"></el-table-column></el-table></template></el-table-column><el-table-columnprop="processStatusName"width="120px"label="状态"align="center"></el-table-column><el-table-column label="操作" align="center" width="100px" fixed="right"><template slot-scope="{ row }"><!-- 1、状态为被退回  2、申请人为当前登陆人 --><el-buttonv-if="row.approveJurisdiction == 1"type="text"@click="approval(row)">审批</el-button><el-buttontype="text"@click="check(row)"v-if="row.checkJurisdiction == 1">核定</el-button><el-buttonv-if="row.processStatusName == '被退回' &&row.nickName === $store.state.user.nickName"type="text"@click="editItem(row)">修改</el-button><el-button type="text" @click="viewItem(row)">查看</el-button></template></el-table-column></el-table><pagination:total="pageInfo.total":page.sync="pageInfo.pageNum":limit.sync="pageInfo.pageSize"@pagination="getList"/><DialogForm ref="dialogFormRef" @success="submitSuccess"></DialogForm></div>
</template><script>
import Search from "@/components/Search/index.vue";
import DialogForm from "./components/form.vue";
import { checkRole } from "@/utils/permission";
import {apiGetBusinessTripList,apiGetStatusOption,
} from "@/api/businessTrip/index";export default {name: "BusinessTrip",components: {Search,DialogForm,},data() {return {searchConfig: [{label: "申请日期",prop: "publishTime",type: "daterange",},{type: "select",label: "状态",prop: "processStatus",option: [],},{type: "input",label: "模糊查询",prop: "queryCondition",},],pageInfo: {pageNum: 1,pageSize: 10,total: 0,},tableData: [],childColumn: [{label: "起始日期",width: "120px",},{label: "结束日期",width: "120px",},{label: "申请天数",width: "120px",},{label: "目的地",width: "120px",},{label: "交通方式",width: "120px",},{label: "出差事由",width: "120px",},{label: "返程日期",width: "120px",},{label: "实际出差天数",width: "120px",},{label: "差补天数",width: "120px",},{label: "备注",width: "120px",},],disabled: true,currentItem: {},searchForm: {},loading: false,};},mounted() {this.getStatusOption();this.toApproval();},activated() {this.getList();this.toApproval();},methods: {checkRole,/*** @description 从首页过来自动打开弹窗*/toApproval() {const id = this.$route.query.approvalId;const jumpType = this.$route.query.jumpType;this.$nextTick(() => {if (jumpType == 21) {this.$refs.dialogFormRef.open("审批", id);} else if (jumpType == 22) {this.$refs.dialogFormRef.open("核定", id);}});},search(form) {this.searchForm = form;this.getList();},getList() {this.loading = true;const params = {...this.searchForm,...this.pageInfo,startApplyDate:this.searchForm.publishTime && this.searchForm.publishTime[0],endApplyDate:this.searchForm.publishTime && this.searchForm.publishTime[1],};Reflect.deleteProperty(params, "publishTime");apiGetBusinessTripList(params).then((response) => {this.tableData = response.data.records;this.pageInfo.total = response.data.total;}).finally(() => {this.loading = false;});},/*** @description 获取流程状态下拉*/getStatusOption() {apiGetStatusOption().then((response) => {this.searchConfig[1].option = response.data.map((item) => {return {label: item.name,value: item.id,};});});},addItem() {this.$refs.dialogFormRef.open("新增");},approval(row) {this.$refs.dialogFormRef.open("审批", row.id);},check(row) {this.$refs.dialogFormRef.open("核定", row.id);},editItem(row) {this.$refs.dialogFormRef.open("修改", row.id);},viewItem(row) {this.$refs.dialogFormRef.open("详情", row.id);},/*** @description 渲染子表*/renderHeader(h, { column, $index }) {const childTable = this.childColumn.map((item) => {return h("div",{style: {width: item.width,padding: "0 10px",textAlign: "center",flexShrink: 0,flexGrow: 0,},},item.label);});return h("div",{class: ["child-head"],},childTable);},submitSuccess() {this.$router.replace({ path: "/businessTrip", query: {} });this.getList();},},
};
</script><style lang="scss" scoped></style>