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

2024-03-01 0 815
目录
  • 需求
  • 实现
  • 实现思路

需求

一个表单中存在子表

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

列表返回格式

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

实现

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>

到此这篇关于el-table实现嵌套表格的展示的文章就介绍到这了,更多相关el-table嵌套表格的展示内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • VueElementUI中el-table表格嵌套样式问题小结
  • el-table多表格弹窗嵌套数据显示异常错乱问题解决方案
  • el-element中el-table表格嵌套el-select实现动态选择对应值功能

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript el-table实现嵌套表格的展示功能(完整代码) https://www.u-9.cn/biancheng/javascript/182354.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务