el-table 封装

废话不说 上内容

<template>
	<div :class="['table-box', className]">
		<div class="header-box">
			<slot name="headerSlot"></slot>
		</div>
		<el-table v-bind="$attrs" v-on="$listeners">
			<div v-for="(colConfig, index) in colConfigs" :key="index">
				<slot v-if="colConfig.slot" :name="colConfig.slot"></slot>
				<component v-else-if="colConfig.component" :is="colConfig.component" :colConfig="colConfig"></component>
				<!-- <el-table-column v-else :show-overflow-tooltip="true" v-bind="colConfig">	</el-table-column> -->
				<el-table-column v-else v-bind="colConfig">
					<template slot-scope="{ row }">
						<el-tooltip :disabled="refshload && !colConfig.isShow" content="" placement="top" effect="dark">
							<div class="vload" @mouseenter="e => isShowToltip(e, index)">{{ row[colConfig.prop] }}</div>
							<div class="vload" slot="content">{{ row[colConfig.prop] }}</div>
						</el-tooltip>
					</template>
				</el-table-column>
			</div>
		</el-table>
	</div>
</template>

<script>
export default {
	props: ['colConfigs', 'className'],
	data() {
		return {
			refshload: true,
		};
	},
	methods: {
		isShowToltip(e, index) {
			const bool = this.textRange(e.target);
			this.colConfigs[index].isShow = bool;
			this.initLoader();
		},
		initLoader() {
			this.refshload = false;
			this.$nextTick(() => (this.refshload = true));
		},
		textRange(el) {
			const textContent = el;
			const targetW = textContent.getBoundingClientRect().width;
			const range = document.createRange();
			range.setStart(textContent, 0);
			range.setEnd(textContent, textContent.childNodes.length);
			const rangeWidth = range.getBoundingClientRect().width;
			return rangeWidth > targetW;
		},
		selectionChange(e) {
			this.$emit('selection', e);
		},
		rowClick(row, colum, event) {
			this.$emit('rowClick', { row, colum, event });
		},
		tableRowClassName({ row }) {
			return row.tableClassName ? row.tableClassName : '';
		},
	},
};
</script>
<style lang="less" scoped>
.table-box {
	width: calc(100% - 24px) !important;
	padding: 16px;
	margin: 0 12px;
	background-color: #fff;
	border-radius: 6px 6px 0 0;
	&.no-padding {
		padding: 16px 0;
	}
	&.no-margin {
		margin: 0;
		width: 100% !important;
	}
	> .header-box {
		> .header-action {
			.flex;
			justify-content: space-between;
			margin-bottom: 10px;
			> .table-title {
				font-size: @16;
				font-weight: bold;
				color: @fontColor;
			}
		}
	}
	.el-table {
		width: 100% !important;
		margin: 0;
		height: 100%;
		/deep/.el-table__row {
			&.gray {
				color: @fontColor3;
			}
		}
		.vload {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>

正常的使用

<MyTable :colConfigs="colConfigs" :data="downloadList">
	<el-table-column slot="actions" label="操作" width="100px">
		<template slot-scope="{ row }">
			<el-link type="success" :underline="false" @click="download(row)"> 下载 </el-link>&nbsp;&nbsp;
			<el-link type="danger" :underline="false" @click="del(row)"> 删除 </el-link>
		</template>
	</el-table-column>
</MyTable>

引入 directive 自适应

directive 案例区, 表格自适应

<MyTable :colConfigs="colConfigs" :data="downloadList" v-table-height-adaptive="{ table: $refs.multipleTable, footerHeight: 68, topHeight: 0, isMyTable:true }">
	<el-table-column slot="actions" label="操作" width="100px">
		<template slot-scope="{ row }">
			<el-link type="success" :underline="false" @click="download(row)"> 下载 </el-link>&nbsp;&nbsp;
			<el-link type="danger" :underline="false" @click="del(row)"> 删除 </el-link>
		</template>
	</el-table-column>
</MyTable>