mt-yd-ui/src/components/base-table/index.vue

<template>
	<div class="base-table">
		<el-table
			:data="data"
			style="width: 100%"
			fit
			border
			:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
			:max-height="maxHeight"
			:span-method="spanMethod || null"
		>
			<!-- 表格头定义 -->
			<template v-for="(head, idx) in tableHeadConfigs">
				<!-- 带type的表头 -->
				<el-table-column
					:key="idx"
					v-if="head.type"
					:type="head.type"
					:label="head.label || head.name || ''"
					:header-align="head.align || 'center'"
					:align="head.align || 'center'"
					:width="head.width || 50"
					v-bind="head.more"
				></el-table-column>
				<!-- 普通的表头 -->
				<el-table-column
					v-else
					:key="idx + 'else'"
					:label="head.label ? head.label : head.name"
					: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 || null"
					v-bind="head.more"
				>
					<!-- 子组件 -->
					<template v-if="head.prop" slot-scope="scope">
						<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emit-data="handleSubEmitData" />
						<!-- 直接展示数据或应用过滤器 -->
						<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>
	</div>
</template>

<script>
import TableHead from './components/table-head.vue'
export default {
	name: 'BaseTable',
	props: {
		tableHeadConfigs: {
			type: Array,
			default: () => []
		},
		data: {
			type: Array,
			default: () => []
		},
		maxHeight: {
			type: Number,
			default: 500
		},
		spanMethod: {
			type: Function,
			default: () => {
				() => [0, 0]
			},
			required: false
		}
	},
	filters: {
		commonFilter: (source, filterType = a => a) => {
			return filterType(source)
		}
	},
	data() {
		return {}
	},
	methods: {
		handleSubEmitData(payload) {
			this.$emit('operate-event', payload)
		}
	},
	components: { TableHead }
}
</script>