vue+elementui table表格递归生成多级表头
vue+elementui table表格递归生成多级表头
前言
1.tableView.vue
2.tableItem.vue(子组件)
3.columnItem.vue(递归组件)
如图所示
前言
近期在写一个后台管理系统的项目,需要表格动态生成多级表头,项目中使用了递归组件,自己总结一下加深记忆.话不多说,直接上代码.
1.tableView.vue
<template>
<div>
<table-item :tableData="tableData" :col="col"></table-item>
</div>
</template>
<script>
import tableItem from "./tableItem";
export default {
name: "TableView",
components: {
tableItem,
},
data() {
return {
//树型结构表头数据
col: [
{
prop: "date",
label: "日期",
},
{
label: "配送信息",
children: [
{
prop: "name",
label: "姓名",
},
{
label: "地址",
children: [
{
prop: "province",
label: "省份",
},
{
prop: "city",
label: "市区",
},
{
prop: "address",
label: "城镇",
},
],
},
],
},
{
prop: "remark",
label: "备注",
},
],
//表格数据
tableData: [
{
date: "2020-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
remark: "无",
},
{
date: "2020-05-02",
name: "王小明",
province: "上海",
city: "浦东新区",
address: "上海市浦东新区顾唐路 518 弄",
remark: "学生",
},
{
date: "2020-05-02",
name: "王小明",
province: "上海",
city: "浦东新区",
address: "上海市浦东新区顾唐路 518 弄",
remark: "学生",
},
{
date: "2020-05-02",
name: "王小明",
province: "上海",
city: "浦东新区",
address: "上海市浦东新区顾唐路 518 弄",
remark: "学生",
},
{
date: "2020-05-02",
name: "王小明",
province: "上海",
city: "浦东新区",
address: "上海市浦东新区顾唐路 518 弄",
remark: "学生",
},
],
};
},
};
</script>
<style scoped></style>
2.tableItem.vue(子组件)
<template>
<div>
<el-table
:show-summary="isShowSum"
:data="tableData"
:height="height"
style="width: 100%"
:header-cell-style="{
background: '#eff2f6',
color: 'rgba(0, 0, 0, 0.85)',
fontSize: '14px',
'text-align': alignType,
}"
>
<el-table-column
v-if="isShowBox"
type="selection"
width="55"
align="center"
>
</el-table-column>
<template>
<column-item
v-for="item in col"
:key="item.label"
:col="item"
></column-item>
</template>
<template #empty>
<div class="empty" style="height:200px;">
<img
class="empty-img"
style="margin:30px auto;height:102px;width:134px;"
src=""
alt
/>
<span class="empty-desc">暂无数据</span>
</div>
</template>
</el-table>
</div>
</template>
<script>
import ColumnItem from "./columnItem";
export default {
name: "TableItem",
components: {
ColumnItem,
},
props: {
//表格数据
tableData: {
type: Array,
default: () => [],
},
//树型结构表头数据
col: {
type: Array,
default: () => [],
},
//是否在表格下方显示合计
isShowSum: {
type: Boolean,
default: false,
},
//判断单元格文字是居中还是左对齐显示,默认居中
alignType: {
type: String,
default: "center",
},
//设置表格高度,固定表头
height: {
type: String,
default: null,//默认不固定表头
},
//判断是否显示多选框
isShowBox: {
type: Boolean,
default: false,//默认不展示
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>
<style>
/* 处理表格表头和内容错位问题 */
.el-table th.gutter {
display: table-cell !important;
}
.el-table th,
.el-table td {
padding: 7px 0 !important;
}
</style>
3.columnItem.vue(递归组件)
<template>
<el-table-column
:prop="col.prop"
:label="col.label"
:align="alignType"
>
<template v-for="(item, index) of col.children">
<column-item v-if="item.children" :key="index" :col="item"></column-item>
<el-table-column
v-else
:key="index"
:label="item.label"
:prop="item.prop"
:align="alignType"
></el-table-column>
</template>
</el-table-column>
</template>
<script>
export default {
name: "ColumnItem",
props: {
col: {
type: Object,
},
//判断单元格文字是居中还是左对齐显示
alignType: {
type: String,
default: "center",//默认居中
},
},
};
</script>
<style scoped></style>
如图所示
