update base-table

src/components/base-table/index.vue

@@ -1,33 +1,41 @@
 <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"
-		>
+		<el-table :data="data" style="width: 100%" fit border :header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }" :max-height="maxHeight">
 			<!-- 表格头定义 -->
-			<el-table-column
-				v-for="(head, idx) in tableHeadConfigs"
-				:key="idx"
-				:type="head.type"
-				:index="head.index"
-				:label="head.label?head.label:head.name"
-				:prop="head.prop"
-				:width="head.width"
-				:min-width="head.minWidth"
-				:fixed="head.fixed"
-				:show-overflow-tooltip="true"
-				filter-placement="top"
-				:align="head.align"
-			>
-				<template v-if="head.prop" slot-scope="scope">
-					<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emitData="handleSubEmitData" />
-					<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
-				</template>
-			</el-table-column>
+			<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"
+					:label="head.label ? head.label : head.name"
+					:prop="head.prop"
+					:width="head.width"
+					:min-width="head.minWidth"
+					:fixed="head.fixed"
+					:show-overflow-tooltip="head.showOverflowTooltip || false"
+					filter-placement="top"
+					:align="head.align"
+					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 }" @emitData="handleSubEmitData" />
+						<!-- 直接展示数据或应用过滤器 -->
+						<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
+					</template>
+				</el-table-column>
+			</template>
 		</el-table>
 	</div>
 </template>
@@ -36,27 +44,27 @@
 export default {
 	name: 'BaseTable',
 	props: {
-    tableHeadConfigs: {
-      type: Array,
-      default: () => []
-    },
+		tableHeadConfigs: {
+			type: Array,
+			default: () => []
+		},
 		data: {
 			type: Array,
 			default: () => []
 		},
-    maxHeight: {
-      type: Number,
-      default: 500
-    }
+		maxHeight: {
+			type: Number,
+			default: 500
+		}
 	},
 	filters: {
 		commonFilter: (source, filterType = a => a) => {
 			return filterType(source)
 		}
 	},
-	data () {
-    return {}
-  },
+	data() {
+		return {}
+	},
 	methods: {
 		handleSubEmitData(payload) {
 			this.$emit('operate-event', payload)