Vue3+ElementPlus 表格分页组件封装

第一步新建公共组件pagination.vue

<template><!-- 分页 --><el-paginationbackground@size-change="handleSizeChange"@current-change="handlePageChange":page-sizes="[10, 30, 100]":page-size="pagesize":layout="layout":total="total"></el-pagination>
</template><script>export default {name:'Pagination',props: {pagesize: [Number, String],//一页多少条currentpage: [Number, String],//当前页total:[Number, String],//总页数options: [Object],  // 分页发生变化赋值给optionsrender: [Function], // 跳转触发的请求layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'}},setup(props,context) {// 分页导航const handlePageChange = (val)=>{props.options.page = val;props.render();}//切换分页条数const handleSizeChange = (val) =>{props.options.limit = val;props.render();}return{handlePageChange,handleSizeChange}}}</script><style>
</style>

第二步使用

<template><v-pagination:pagesize="query.limit":total="pageTotal":options="query":render="getData"></v-pagination>
</template>
<script>
import {ref,reactive,getCurrentInstance} from "vue";
import vPagination from '../../components/pagination.vue';
export default {components: {vPagination,},setup() {const { proxy } = getCurrentInstance(); //获取上下文实例const tableData = ref([]),//表格数据pageTotal = ref(0),总条数query = reactive({//配置对应的查询参数appTimeStart:'',appTimeEnd:'',page: 1,limit:10,//page第几页,limit是一页几个});// 获取表格数据const getData = () => {proxy.$request({url: 'api/getList',method: 'POST',data:query}).then(res => {pageTotal.value = res.count;tableData.value = res.data;})};getData();  return {query,shortcuts,tableData,pageTotal,getData};       }
}
</script>

Vue3+ElementPlus 表格分页组件封装相关推荐

Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
2022暑期实践（Django教程学习记录）（第三周1）P44靓号管理-分页组件封装
P44靓号管理-分页组件封装要解决的问题,分页和搜索功能不能同时用 from django.http.request import QueryDictimport copyquery_dict = ...
ElementUI 表格分页组件
ElementUI 表格分页组件 <template><div class="pagination"><el-paginationbackground ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
vue3 element-plus el-dialog 二次封装，多层调用
如果直接用 v-model 绑定值,然后封装在 dev 环境没有问题,但是放到服务器上会报错: ReferenceError: visible is not defined at ut.onUpdat ...
vue3+element-plus实现日历组件农历显示且带列表数据
calendar.js https://gitee.com/mirrors/calendar-js.git 这个js可以去下载,里面涉及的有点多要设置日历每周以周一开始,需要在main.js中加入这 ...

Vue3+ElementPlus 表格分页组件封装

第一步新建公共组件pagination.vue

第二步使用

Vue3+ElementPlus 表格分页组件封装相关推荐

最新文章

热门文章