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)

src/views/modules/monitoring/equipment.vue

@@ -12,6 +12,7 @@
 		</el-form>
 		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
 			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+			<el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
 			<el-table-column prop="id" header-align="center" align="center" label="id"></el-table-column>
 			<el-table-column prop="code" header-align="center" align="center" label="编码"></el-table-column>
 			<el-table-column prop="name" header-align="center" align="center" label="设备名称"></el-table-column>
@@ -72,9 +73,54 @@
 import BaseTable from '@/components/base-table'
 import AddOrUpdate from './equipment-add-or-update'
 
+const TableOperateComponent = {
+	name: 'TableOperations',
+	props: {
+		injectData: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			btnTypes: {
+				add: 'primary',
+				delete: 'danger',
+				detail: 'info'
+				// add more...
+			},
+			colors: {
+				// add more...
+			},
+			text: {
+				// for i18n inject:
+				'add': '添加'
+				// add more...
+			}
+		}
+	},
+	methods: {
+		// 发射事件
+	},
+	render: function(h) {
+		let btns = []
+		for (const optionStr of this.injectData.head?.options) {
+			btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
+		}
+		return h('span', null, btns)
+	}
+}
+
 const tableConfigs = [
-	{ type: 'selection' },
-	{ type: 'index', name: 'No' },
+	{
+		type: 'index',
+		name: '序号',
+		more: {
+			index: function(index) {
+				return (index + 1) * 2
+			}
+		}
+	},
 	{ prop: 'id', name: 'id' },
 	{ prop: 'code', name: '编码' },
 	{ prop: 'name', name: '设备名称' },
@@ -95,12 +141,13 @@ const tableConfigs = [
 	{ prop: 'valid', name: '删除标志，是否有效:1 可用 0不可用' },
 	{ prop: 'creatorId', name: '创建人' },
 	{ prop: 'creatorName', name: '创建人姓名' },
-	{ prop: 'createTime', name: '创建时间' },
+	{ prop: 'createTime', name: '添加时间' },
 	{ prop: 'updaterId', name: '更新人' },
 	{ prop: 'updaterName', name: '更新人姓名' },
 	{ prop: 'updateTime', name: '更新时间' },
 	{ prop: 'version', name: '版本号' },
-	{ prop: 'externalCode', name: '外部系统代码' }
+	{ prop: 'externalCode', name: '外部系统代码' },
+	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['add', 'detail', 'delete'] }
 ]
 
 export default {