基于vue3和elementPlus的分页组件封装 CommonPagination.vue组件<template> <div class="pagination-container"> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" :total="total" :background="true" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script setup> import { ref, watch } from 'vue' const props = defineProps({ total: { type: Number, required: true }, // 初始页码 page: { type: Number, default: 1 }, // 初始每页条数 limit: { type: Number, default: 10 } }) const emit = defineEmits(['update:page', 'update:limit', 'pagination']) const currentPage = ref(props.page) const pageSize = ref(props.limit) // 监听父组件传入的页码和每页条数变化 watch(() => props.page, (newVal) => { currentPage.value = newVal }) watch(() => props.limit, (newVal) => { pageSize.value = newVal }) // 每页条数改变 const handleSizeChange = (val) => { emit('update:limit', val) emit('pagination', { page: currentPage.value, limit: val }) } // 页码改变 const handleCurrentChange = (val) => { emit('update:page', val) emit('pagination', { page: val, limit: pageSize.value }) } </script> <style scoped> .pagination-container { padding: 15px 0; display: flex; justify-content: flex-end; } </style> 父组件调用 father.vue<template> <CommonPagination v-model:page="queryParams.page" v-model:limit="queryParams.limit" :total="total" @pagination="getList" /> </template> <script setup> import { ref, reactive } from 'vue' import CommonPagination from './CommonPagination.vue' const queryParams = reactive({ page: 1, //当前页 limit: 10, //默认条数1页10条 // 其他查询参数... }) const total = ref(0) //总条数 //请求方法getList const getList = async ({ page, limit } = queryParams) => { try { //1、调接口将分页的参数传进去（有其它参数后面加） const res = await API //2、获取到的数据总页数赋值给total，获取到的data数据赋值给列表变量即可 } catch (error) { console.error(error) ElMessage.error('获取数据失败') } } </script>{lamp/}{callout color="#f0ad4e"} 没安装elementplus记得先安装 npm install elementplus ,并在main.js中use完成注册，即可看到封装好的分页组件 {/callout}

表格内容溢出显示省略号浮空提示内容 表格列数据组件内容显示封装<template> <el-tooltip :key="key" :disabled="tipShow" placement="top" effect="light" popper-class="popper-class" > <template #content> <span :class="newLine === 'true' && 'new-line'">{{ content }}</span> </template> <p ref="tipContent" v-resize:200="onResize" class="tips"> <slot>{{ content }}</slot> </p> </el-tooltip> </template> <script> import { computed, defineComponent, ref, onMounted } from 'vue' export default defineComponent({ name: 'tips', isComponents: true, props: { content: { type: null, required: true, default: '' }, attributes: { type: Object, default: () => {} }, newLine: { type: String, default: '' }, key: { type: null, default: Date.now() + '-' + Math.floor(Math.random() * 10000) } }, setup(props) { const tipContent = ref(null) const tipShow = ref(true) const getBoolean = () => { if ( props.content && tipContent.value && tipContent.value.scrollWidth > tipContent.value.clientWidth ) { return false } if (props.attributes && props.attributes.hasOwnProperty('disabled')) { return props.attributes.disabled } return true } onMounted(() => { tipShow.value = getBoolean() }) const onResize = () => { tipShow.value = getBoolean() } return { tipContent, tipShow, onResize } } }) </script> <style lang="scss" scoped> .tips { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line { white-space: pre; } </style> <style lang="scss"> .popper-class { max-width: 900px; } </style> <template> <el-tooltip :key="key" :disabled="tipShow" placement="top" effect="light" popper-class="popper-class" > <template #content> <span :class="newLine === 'true' && 'new-line'">{{ content }}</span> </template> <p ref="tipContent" v-resize:200="onResize" class="tips"> <slot>{{ content }}</slot> </p> </el-tooltip> </template> <script> import { computed, defineComponent, ref, onMounted } from 'vue' export default defineComponent({ name: 'tips', isComponents: true, props: { content: { type: null, required: true, default: '' }, attributes: { type: Object, default: () => {} }, newLine: { type: String, default: '' }, key: { type: null, default: Date.now() + '-' + Math.floor(Math.random() * 10000) } }, setup(props) { const tipContent = ref(null) const tipShow = ref(true) const getBoolean = () => { if ( props.content && tipContent.value && tipContent.value.scrollWidth > tipContent.value.clientWidth ) { return false } if (props.attributes && props.attributes.hasOwnProperty('disabled')) { return props.attributes.disabled } return true } onMounted(() => { tipShow.value = getBoolean() }) const onResize = () => { tipShow.value = getBoolean() } return { tipContent, tipShow, onResize } } }) </script> <style lang="scss" scoped> .tips { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line { white-space: pre; } </style> <style lang="scss"> .popper-class { max-width: 900px; } </style>