src/components/base-table/components/table-head.vue

@@ -0,0 +1,40 @@
+<template>
+	<el-table-column
+		:label="opt.label ? opt.label : opt.name"
+		:prop="opt.prop || null"
+		:width="opt.width || null"
+		:min-width="opt.minWidth || null"
+		:fixed="opt.fixed || null"
+		:show-overflow-tooltip="opt.showOverflowTooltip || false"
+		filter-placement="top"
+		:align="opt.align || null"
+		v-bind="opt.more"
+	>
+		<template v-if="opt.prop" slot-scope="scope">
+			<component v-if="opt.subcomponent" :is="opt.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head: opt }" @emit-data="handleSubEmitData" />
+			<!-- 直接展示数据或应用过滤器 -->
+			<span v-else>{{ scope.row[opt.prop] | commonFilter(opt.filter) }}</span>
+		</template>
+		<!-- 递归 -->
+		<template v-if="!opt.prop && opt.children">
+			<TableHead v-for="(subhead, index) in opt.children" :key="'subhead' + index" :opt="subhead" />
+		</template>
+	</el-table-column>
+</template>
+
+<script>
+export default {
+	name: 'TableHead',
+	filters: {
+		commonFilter: (source, filterType = a => a) => {
+			return filterType(source)
+		}
+	},
+	props: {
+		opt: {
+			type: Object,
+			default: () => ({})
+		}
+	}
+}
+</script>

src/components/base-table/index.vue

@@ -19,13 +19,13 @@
 					v-else
 					:key="idx + 'else'"
 					:label="head.label ? head.label : head.name"
-					:prop="head.prop"
-					:width="head.width"
-					:min-width="head.minWidth"
-					:fixed="head.fixed"
+					:prop="head.prop || null"
+					:width="head.width || null"
+					:min-width="head.minWidth || null"
+					:fixed="head.fixed || null"
 					:show-overflow-tooltip="head.showOverflowTooltip || false"
 					filter-placement="top"
-					:align="head.align"
+					:align="head.align || null"
 					v-bind="head.more"
 				>
 					<!-- 子组件 -->
@@ -34,6 +34,11 @@
 						<!-- 直接展示数据或应用过滤器 -->
 						<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
 					</template>
+
+					<!-- 多级表头 -->
+					<template v-if="!head.prop && head.children">
+						<TableHead v-for="(subhead, subindex) in head.children" :key="'subhead-' + idx + '-subindex-' + subindex" :opt="subhead" />
+					</template>
 				</el-table-column>
 			</template>
 		</el-table>
@@ -41,6 +46,7 @@
 </template>
 
 <script>
+import TableHead from './components/table-head.vue'
 export default {
 	name: 'BaseTable',
 	props: {
@@ -69,6 +75,7 @@ export default {
 		handleSubEmitData(payload) {
 			this.$emit('operate-event', payload)
 		}
-	}
+	},
+	components: { TableHead }
 }
 </script>

src/views/modules/monitoring/testMultiBaseTable.vue

@@ -0,0 +1,41 @@
+<template>
+	<div style="background: #ccc; width: 800px; height: 800px;">
+		<base-table :table-head-configs="configs" :data="dataList" />
+	</div>
+</template>
+
+<script>
+import BaseTable from '@/components/base-table'
+
+export default {
+	name: 'Test',
+	components: { BaseTable },
+	data() {
+		return {
+			configs: [
+				{ prop: 'createTime', name: '创建日期' },
+				{ prop: 'name', name: '名称' },
+				{
+					label: '地址',
+					children: [
+						{ prop: 'province', name: '省' },
+						{
+							// prop: 'city',
+							name: '市',
+							children: [
+								{ prop: 'county', name: '县' },
+								{ prop: 'downtown', name: '镇' }
+							]
+						}
+					]
+				},
+				{ prop: 'status', name: '状态', filter: val => ['激活', '注销'][val] }
+			],
+			dataList: [
+				{ createTime: '2022-01-01', name: '奥特曼', province: '北京', city: '昌平', county: '怀宁', downtown: '石牌', status: 0 },
+				{ createTime: '2022-01-02', name: '盈江', province: '上海', city: '徐家汇', status: 1 }
+			]
+		}
+	}
+}
+</script>