vue3+elementplus封装表格和分页

组件封装

<template>
	<div class="table">
		<el-table
			:data="tableData"
			border
			max-height="650"
			style="width: 100%"
			v-loading="loading"
			@selection-change="selectionChange"
		>
			<el-table-column type="selection" width="50" />
			<template v-for="(item, index) in tableHeader" :key="item.prop">
				<el-table-column
					:prop="item.prop"
					:label="item.label"
					:fixed="item.fixed"
					:align="item.align || 'center'"
					:show-overflow-tooltip="item.overHidden || false"
					:min-width="item.minWidth || '100px'"
					:sortable="item.sortable || false"
					:type="item.type"
					:width="item.width"
				>
					<!-- 插槽：预留功能 -->
					<template #default="scope" v-if="item.slot">
						<slot :name="item.slot" :data="scope.row"></slot>
					</template>
					<template #default="scope" v-else>
						<span>{{ scope.row[item.prop] ? scope.row[item.prop] : "" }}</span>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			:locale="locale"
			background
			class="pagination"
			small
			:page-sizes="pageSizesArr"
			@size-change="sizeChange"
			@current-change="currentChange"
			:current-page="current"
			:page-size="size"
			:total="total"
			:layout="layout"
		/>
	</div>
</template>
<script setup>
import { defineProps, defineEmits, onMounted, reactive, ref } from "vue";

const emits = defineEmits(["selectionChange", "sizeChange", "currentChange"]);
const props = defineProps({
	// 表格显示的数据
	tableData: {
		type: String,
		default: function () {
			return "";
		}
	},
	// 表头数据
	tableHeader: {
		type: String,
		default: function () {
			return [];
		}
	},
	// 总页数
	total: {
		type: Number,
		// 类型
		required: true,
		default: 0
	},
	// 分页的页容量数组
	pageSizesArr: {
		type: Array,
		default() {
			return [20, 40, 50];
		}
	},
	// 分页的布局
	layout: {
		type: String,
		default: "total, sizes, prev, pager, next, jumper"
	}
});
//表格事件
const selectionChange = val => {
	emits("selectionChange", val);
};

// 页数改变的时候触发的事件
const sizeChange = val => {
	emits("handleSizeChange", val);
};
// 当前页改变的时候触发的事件
const currentChange = val => {
	emits("handleCurrentChange", val);
};
</script>
<style scoped>
.table {
	margin-top: 1rem;
	height: 100%;
}
.pagination {
	float: right;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}
</style>

使用

import CommonTable from "组件名";
<CommonTable
	:isOperate="isOperate"
	:operateWidth="operateWidth"
	:tableData="tableData"
	:tableHeader="tableHeader"
	:total="total"
	@handleCurrentChange="currentChange"
	@handleSizeChange="sizeChange"
>
	<template #isShow="{ data }">
		<el-tag v-if="data.isShow == true" type="success">显示</el-tag>
		<el-tag v-if="data.isShow == false" type="info">隐藏</el-tag>
	</template>
	<template #action="{ data }">
		<el-tag size="mini" style="cursor: pointer; margin-right: 5px" type="success" @click="updateCommentReview(data)">
			编辑
		</el-tag>
		<el-tag v-if="action == 0" size="mini" style="cursor: pointer" type="error" @click="removeCommentReview(data)">
			删除
		</el-tag>
	</template>
</CommonTable>

const tableHeader = reactive([
	{
		prop: "title",
		fixed: "left",
		label: "页面名称",
		width: "130px",
		align: "center" // 对齐方式
	},
	{
		prop: "name",
		label: "页面ID",
		width: "130px",
		align: "center" // 对齐方式
	},
	{
		prop: "component",
		label: "本地路径",
		width: "130px",
		align: "left" // 对齐方式
	},
	{
		prop: "icon",
		label: "图标",
		width: "130px",
		align: "left" // 对齐方式
	},
	{
		prop: "path",
		label: "路由地址",
		width: "130px",
		align: "left" // 对齐方式
	},
	{
		prop: "isShow",
		label: "是否显示",
		slot: "isShow", //插槽根据需求显示
		width: "130px"
	},
	{
		label: "操作",
		slot: "action",
		fixed: "right",
		width: "130px",
		align: "center" // 对齐方式
	}
]);

const operateWidth = ref(160); // 操作列宽度
const isOperate = ref(true); // 操作列是否显示
let pageSize = ref(20); // 每页显示条数
let pageNum = ref(1); // 当前页码
let total = ref(0); // 总条数