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

<template>
	<div class="base-table">
		<!-- 花式新增按钮 -->
		<div class="setting">
			<template v-if="topBtnConfig.length > 0">
				<!-- table顶部操作按钮区 -->
				<div class="action_btn">
					<template v-for="(btn, index) in topBtnConfig">
						<span v-if="btn.type === 'add'" :key="index" style="display: inline-block" @click="clickTopButton(btn.type)">
							<svg-icon style="width: 14px; height: 14px" class="iconPlus" icon-class="addPage" />
							<span class="add">{{ $t('add') }}</span>
						</span>
					</template>
				</div>
			</template>
			<!-- 设置小齿轮table列的图标 -->
			<el-popover placement="bottom-start" width="200" trigger="click">
				<div class="setting-box">
					<!-- :label="item.name ? item.name : item.label" 三元判别就可以让厂务的实时数据可以显示 -->
					<el-checkbox v-for="(item, index) in tableHeadConfigs" :key="'cb' + index" v-model="selectedBox[index]" :label="item.name ? item.name : item.label" />
				</div>
				<i slot="reference" class="el-icon-s-tools" style="color: #0b58ff" />
			</el-popover>
		</div>
		<!-- border 属性增加边框:header-cell-style="{background:'#FAFAFA',color:'#606266',height: '40px'}" -->
		<!-- <el-table :data="data" -->
		<el-table
			:data="renderData"
			style="width: 100%"
			fit
			highlight-current-row
			:header-cell-style="{ background: '#FAFAFA', color: '#000', height: '40px' }"
			:max-height="maxHeight"
			:span-method="spanMethod || null"
			:row-style="{ height: '40px' }"
			:cell-style="{ padding: '0px' }">
			<!-- 表格头定义 -->
			<!-- in tableHeadConfigs -->
			<template v-for="(head, idx) in renderTableHeadList">
				<!-- 带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"
					:index="
						head.type === 'index'
							? (val) => {
									return val + 1 + (page - 1) * size
							  }
							: null
					"
					v-bind="head.more"></el-table-column>
				<!-- 普通的表头 -->
				<!-- :align="head.align || null" 表头居中 -->
				<!-- :min-width="head.minWidth || null" -->
				<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 || true"
					:tooltip-effect="head.tooltipEffect || 'light'"
					filter-placement="top"
					:align="head.align || 'center'"
					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 { isObject, isString } from 'lodash'
import TableHead from './components/table-head.vue'
export default {
	name: 'BaseTable',
	filters: {
		commonFilter: (source, filterType = (a) => a) => {
			return filterType(source)
		}
	},
	props: {
		tableHeadConfigs: {
			type: Array,
			default: () => []
			// required: true,
			// validator: val => val.filter(item => !isString(item.prop) || !isString(item.name)).length === 0
		},
		data: {
			type: Array,
			default: () => []
		},
		maxHeight: {
			type: Number,
			// default: window.innerHeight - 325
			// el-table高度
			default: window.innerHeight - 100
			// default: 500
		},
		spanMethod: {
			type: Function,
			default: () => {
				;() => [0, 0]
			},
			required: false
		},
		page: {
			type: Number,
			default: 1
		},
		size: {
			type: Number,
			default: 10
		},
		// 新增的props
		// tableConfig: {
		// 	type: Array,
		// 	required: true,
		// 	validator: (val) => val.filter((item) => !isString(item.prop) || !isString(item.label)).length === 0
		// },
		topBtnConfig: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	filters: {
		commonFilter: (source, filterType = (a) => a) => {
			return filterType(source)
		}
	},
	data() {
		return {
			selectedBox: new Array(100).fill(true)
		}
	},
	computed: {
		renderData() {
			return this.data.map((item, index) => {
				return {
					...item,
					_pageIndex: (this.page - 1) * this.limit + index + 1
				}
			})
		},
		renderTableHeadList() {
			return this.tableHeadConfigs.filter((item, index) => {
				return this.selectedBox[index]
			})
		}
	},
	beforeMount() {
		this.selectedBox = new Array(100).fill(true)
		if (this.highIndex) {
			this.tableRowIndex = 0
		}
	},
	created() {
		// console.log(this.selectedBox)
		// console.log(this.tableHeadConfigs)
	},
	methods: {
		handleSubEmitData(payload) {
			this.$emit('operate-event', payload)
		},
		clickTopButton(val) {
			this.$emit('clickTopBtn', val)
		}
	},
	components: { TableHead }
}
</script>

<style lang="scss">
.setting {
	text-align: right;
	padding: 0px 15px 7px;
	.action_btn {
		display: inline-block;
		margin-right: 15px;
		font-size: 14px;
		.add {
			color: #0b58ff;
		}
	}
	.setting-box {
		width: 100px;
	}
	i {
		color: #aaa;
	}
}
.el-table .success-row {
	background: #eaf1fc;
}
.iconPlus {
	color: #0b58ff;
	margin-right: 2px;
}
</style>