vue3+Element Plus功能组件封装——表格（含分页。一次性获取数据；分页获取数据）

目录

1.分页获取数据表格

1.1组件介绍

1.2组件完整代码

1.3组件的使用

2.一次性获取数据表格

---

1.分页获取数据表格

1.1组件介绍

①通过以下ColumnData的配置可实现表格的渲染，tableData为网络请求的数据；

②可动态配置表格的多选和分页；

③可通过width参数自由设置列宽，表格高度；

④action为表格配置操作事件；

⑤tooltips用于点击切换表格指定单元格的文本，并通过配置tooltipDisable切换状态，动态配置样式，溢出显示省略号，鼠标移入可展示完整文本；

⑥上述点击事件为通过经纬度逆地址编码获取的位置详细信息，感兴趣可点击文章链接；

⑦css部分，可通过:deep(）选择行的修改表格样式；

1.2组件完整代码（子组件）

<template>
	<div class="myTable">
		<el-table :data="tableData" ref="tablemodule" @selection-change="handleSelectionChange" :height="height? height:500" 
		style="margin-bottom: 15px;"
			:scroll="true" >
			<template v-if="needCheck">
				<el-table-column type="selection" width="55" />
			</template>
			<template v-for="(column, colIndex) in columnData" :key="colIndex">
				<template v-if="column.actions">
					<el-table-column :label="column.label" :width="column.width" align="center">
						<template #default="{ row }">
							<div v-for="(action, actionIndex) in column.actions" :key="actionIndex"
								style="display: inline;margin: 0 5px;">
								<el-button :type="action.type" :size="action.size || 'small'"
									:disabled="action.disabled" :style="action.style" @click="action.handler(row)">
									{{ action.label }}
								</el-button>
							</div>
						</template>
					</el-table-column>
				</template>
				<template v-else-if="column.tooltips">
					<el-table-column :label="column.label" :width="column.width" align="center">
						<template #default="{ row }">
							<div v-for="(tooltip, tooltipIndex) in column.tooltips" :key="tooltipIndex"
								style="display: inline;margin: 0 5px;">
								<el-tooltip :content="row.defaultButtonText" :disabled="row.tooltipDisable"
									placement="bottom" effect="light">
									<span @click="tooltip.handler(row,column)" :style="tooltip.style"
										:class="!row.tooltipDisable? 'left_button':''">
										{{row.defaultButtonText}}
									</span>
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
				</template>

				<el-table-column v-else :width="column.width" :prop="column.prop" align="center"
					:label="column.label" />

			</template>
		</el-table>
		<el-pagination v-if="showPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
			:total="total" />
	</div>
</template>


<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		columnData: Array,
		tableData: Array,
		needCheck: Boolean,
		total: Number,
		showPagination: Boolean,
		height:Number
	})
	const emit = defineEmits(['setTableVisible'])

	let pageSize = ref(10)
	let currentPage = ref(1)

	const tablemodule = ref(null)

	onMounted(() => {

	})



	const handleSizeChange = (e) => {
		pageSize.value = e
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		emit('pageChange', val)
	}

	const handleSelectionChange = val => {
		emit('selectChange', val)
		console.log(val)
	}

	const clearSelection = () => {
		console.log('我被调用了');
		if (tablemodule.value) {
			// 调用clearSelection方法清空选中行
			tablemodule.value.clearSelection();
		}
	}
	// 暴露方法给父组件
	defineExpose({
		clearSelection
	})
</script>



<style scoped>
	.myTable {
		width: 100%;
		position: relative;
	}
	.left_button {
		width: 150px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis !important;
	}
	:deep(.el-table tr) {
		background-color: #2A59A0 !important;
	}
	:deep(.el-table tr:hover) {
		background-color: #2A59A0 !important;
	}
	:deep(.el-table) {
		background-color: #05274E !important;
		color: #fff;
		border:1px solid #2A59A0 ;
	}
	.el-table {
	  --el-border-color-lighter: #2A59A0; /* 将边框颜色设为透明 */
	  box-sizing: border-box;
	}
	
	:deep(.el-table tr:nth-child(2n+1)) {
		background-color: #0E3C75 !important;
	}
	
	:deep(.el-table td.el-table__cell) {
		border-bottom: none;
	}
	:deep(.el-table .cell) {
		line-height: 38px;
	}
	/* 去除表格颜色和线条 */
	:deep(.el-table th.el-table__cell) {
		color: #34E3AF;
		/* border-color: #2B5AA0; */
		background-color: rgba(6, 41,81, 0.9);
		border-bottom: 1px solid #6C9BFF;
	}
	:deep(.el-table--enable-row-hover .el-table__body tr:hover td) {
	  background-color: #000 !important;
	}
	:deep(.el-pagination button){
		background-color:transparent;
		border: 1px solid #2A59A0;
		color: #fff;
	}
	:deep(.el-pagination .el-input__wrapper){
		background-color: transparent;
	}
	:deep(.el-pager li){
		background-color: transparent;
		border:1px solid #1B6BD2;
		color: #fff;
		margin:0 5px;
		border-radius: 5px;
	}
	:deep(.el-pager li.is-active){
		background-color: #104A91;
	}
</style>

1.3组件的使用（父组件）

<template>
	<div class="common_style">
		<table-module :columnData="ColumnData" :tableData="tableData" @selectChange="selectChange" :height="597"
			@pageChange="pageChange" :total="total" :showPagination="true" :needCheck="true"></table-module>
	</div>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import tableModule from '@/components/tableModule.vue'


	// 导出数据
	let toExportData = ref([])
	const selectChange = (data) => {
		toExportData.value = data
		console.log(toExportData.value);
	}

	// 分页切换
	const pageChange = (page) => {
		let offset = (page - 1) * 10
		getData(offset)
	}


    let tableData = ref([])
	const ColumnData = computed(() => {
		return [{
				width: 80,
				prop: 'index',
				label: i18n.global.t('DQ.index')
			},
			{
				prop: 'deviceID',
				label: i18n.global.t('DQ.ID')
			},
			{
				prop: 'deviceName',
				label: i18n.global.t('DQ.Name')
			},
			{
				prop: 'time',
				label: i18n.global.t('DQ.time')
			},
			{
				label: i18n.global.t('DQ.getLocation'),
				width: 220,
				tooltips: [{
					label: i18n.global.t('DQ.getLocalInfo'),
					handler: (row) => getLocalInfo(row),
					style: 'cursor: pointer;color:#B9B750;'
				}]
			},

		]
	})
</script>



<style scoped>

</style>

2.一次性获取数据表格

封装和使用与上述类似，区别在于分页的方式不同

传入的数据经过paginateData函数处理，进行分页展示

具体代码如下

<template>
	<div class="myTable">
		<el-table :data="currentTableData" ref="tablemodule" @selection-change="handleSelectionChange" :height="tableHeight" style="margin-bottom: 15px;" :scroll="true">
			<template v-if="needCheck">
				<el-table-column type="selection" width="55" />
			</template>

			<template v-for="(column, colIndex) in columnDataAll" :key="colIndex">
				<el-table-column v-if="!column.actions" :width="column.width" :prop="column.prop" align="center" :label="column.label" />
				<template v-else>
					<el-table-column :label="column.label" :width="column.width" align="center">
						<template #default="{ row }">
							<div v-for="(action, actionIndex) in column.actions" :key="actionIndex" style="display: inline;margin: 0 5px;">
								<el-button :type="action.type" text :size="action.size || 'small'"
									:disabled="action.disabled" :style="action.style" @click="action.handler(row)">
									{{ action.label }}
								</el-button>
							</div>
						</template>
					</el-table-column>
				</template>
			</template>
		</el-table>
		<el-pagination v-if="showPaginationAll"  @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage"  :page-size="pageSize"
			layout="total, prev, pager, next, jumper" :total="total" />
	</div>
</template>


<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		columnDataAll: Array,
		tableDataAll: Array,
		needCheck: Boolean,
		showPaginationAll: Boolean,
		tableHeight:Number,
		pageSize:8
	})
	const emit = defineEmits(['setTableVisible'])
	
	let pageSize = ref(props.pageSize||10)
	let currentPage = ref(1)
	let total = computed(() => {
		console.log(props.tableDataAll);
		if(!props.tableDataAll[0]){
			return 0
		}
		return props.tableDataAll.length
	})
	let currentTableData = computed(() => {
		// console.log(props.tableDataAll);
		return props.showPaginationAll ? paginateData(currentPage.value, pageSize.value, props.tableDataAll) : props
			.tableDataAll
	})
	
	const tablemodule = ref(null)

	const handleSizeChange = (e) => {
		pageSize.value = e
	}
	const handleCurrentChange = (e) => {
		currentPage.value = e
		console.log(e)
	}

	const paginateData = (page, size, Data) => {
		const startIndex = (page - 1) * size;
		const endIndex = startIndex + size;
		return Data.slice(startIndex, endIndex);
	}

	const handleSelectionChange = val => {
		emit('selectChange',val)
		console.log(val)
	}
	
	const clearSelection = ()=>{
		console.log('我被调用了');
		if (tablemodule.value) {
		    // 调用clearSelection方法清空选中行
			tablemodule.value.clearSelection();
		}
	}
	// 暴露方法给父组件
	defineExpose({clearSelection})
	
</script>



<style scoped>
	.myTable {
		width: 100%;
	}
	:deep(.el-table tr) {
		background-color: #2A59A0 !important;
	}
	:deep(.el-table tr:hover) {
		background-color: #2A59A0 !important;
	}
	:deep(.el-table) {
		background-color: #05274E !important;
		color: #fff;
		border:1px solid #2A59A0 ;
	}
	.el-table {
	  --el-border-color-lighter: #2A59A0; /* 将边框颜色设为透明 */
	}
	
	:deep(.el-table tr:nth-child(2n+1)) {
		background-color: #0E3C75 !important;
	}
	
	:deep(.el-table td.el-table__cell) {
		border-bottom: none;
	}
	/* 去除表格颜色和线条 */
	:deep(.el-table th.el-table__cell) {
		color: #34E3AF;
		/* border-color: #2B5AA0; */
		background-color: #0E3D76;
		border-bottom: 1px solid #6C9BFF;
	}
	:deep(.el-table .cell) {
		line-height: 34px;
	}
	:deep(.el-table--enable-row-hover .el-table__body tr:hover td) {
	  background-color: #000 !important;
	}
	:deep(.el-pagination button){
		background-color:transparent;
		border: 1px solid #2A59A0;
		color: #fff;
	}
	:deep(.el-pagination .el-input__wrapper){
		background-color: transparent;
	}
	:deep(.el-pager li){
		background-color: transparent;
		border:1px solid #1B6BD2;
		color: #fff;
		margin:0 5px;
		border-radius: 5px;
	}
	:deep(.el-pager li.is-active){
		background-color: #104A91;
	}
</style>

以上就是本期文章全部内容，觉得有用可以点赞收藏+关注！