el-table实现嵌套表格的展示功能(完整代码)

需求

一个表单中存在子表

列表返回格式

实现

实现思路

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>