一个表单中存在子表
列表返回格式
el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式
将共同的列放到一列中,通过渲染自定义表头render-header
,将表头按照合适的宽度渲染出来
<el-table-column prop="table" label="子表" class-name="has-child" :render-header="renderHeader" :width="childColumn.length * 120 + 2 + 'px'" > <template slot-scope="scope"> <el-table border :data="scope.row.details" class="child-table" :show-header="false" > <el-table-column prop="startDate" align="center" label="起始日期" width="120px" ></el-table-column> <el-table-column prop="endDate" align="center" label="结束日期" width="120px" ></el-table-column> <el-table-column prop="applyDay" align="center" label="申请天数" width="120px" ></el-table-column> <el-table-column prop="destination" align="center" label="目的地" width="120px" ></el-table-column> <el-table-column prop="transportation" align="center" label="交通方式" width="120px" ></el-table-column> <el-table-column prop="businessTripReason" align="center" label="出差事由" width="120px" ></el-table-column> <el-table-column prop="returnDate" align="center" label="返程日期" width="120px" ></el-table-column> <el-table-column prop="actualDay" align="center" label="实际出差天数" width="120px" ></el-table-column> <el-table-column prop="subsidyDay" align="center" label="差补天数" width="120px" ></el-table-column> <el-table-column prop="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-table border :data="tableData" v-loading="loading" class="el-child-table" > <el-table-column prop="applyDate" label="申请日期" align="center" width="120px" > </el-table-column> <el-table-column prop="nickName" label="申请人" align="center" width="140px" > </el-table-column> <el-table-column prop="deptName" label="申请部门" align="center" width="120px" > </el-table-column> <el-table-column prop="table" label="子表" class-name="has-child" :render-header="renderHeader" :width="childColumn.length * 120 + 2 + 'px'" > <template slot-scope="scope"> <el-table border :data="scope.row.details" class="child-table" :show-header="false" > <el-table-column prop="startDate" align="center" label="起始日期" width="120px" ></el-table-column> <el-table-column prop="endDate" align="center" label="结束日期" width="120px" ></el-table-column> <el-table-column prop="applyDay" align="center" label="申请天数" width="120px" ></el-table-column> <el-table-column prop="destination" align="center" label="目的地" width="120px" ></el-table-column> <el-table-column prop="transportation" align="center" label="交通方式" width="120px" ></el-table-column> <el-table-column prop="businessTripReason" align="center" label="出差事由" width="120px" ></el-table-column> <el-table-column prop="returnDate" align="center" label="返程日期" width="120px" ></el-table-column> <el-table-column prop="actualDay" align="center" label="实际出差天数" width="120px" ></el-table-column> <el-table-column prop="subsidyDay" align="center" label="差补天数" width="120px" ></el-table-column> <el-table-column prop="remark" align="center" label="备注" width="120px" ></el-table-column> </el-table> </template> </el-table-column> <el-table-column prop="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-button v-if="row.approveJurisdiction == 1" type="text" @click="approval(row)" >审批</el-button > <el-button type="text" @click="check(row)" v-if="row.checkJurisdiction == 1" >核定</el-button > <el-button v-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>
到此这篇关于el-table实现嵌套表格的展示的文章就介绍到这了,更多相关el-table嵌套表格的展示内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝!