element-ui分页的使用及修改样式

Posted 2023-03-28

参考技术A 1.安装

2.在main.js中引入,这里是全部引入，也可以按需引入

3.使用

js:

css：修改默认样式

Element-ui组件--pagination分页的使用

　　一般在写前端页面时，经常会遇到分页这样的效果，element-ui中便有这样的插件，用vue框架使用的很方便，在此做一总结：

<template>  <div class="block">   
<el-pagination
      @size-change="handleSizeChange" // pageSize改变时会触发
      @current-change="handleCurrentChange"  // currentPage改变时会触发
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"// 这是下拉框可以选择的，选择一夜显示几条数据
      :page-size="100"  // 这是当前煤业显示的条数
      layout="total, sizes, prev, pager, next, jumper"
      :total="400" // 这个是总共有多少条数据，把后台获取到的数据总数复制给total就可以了
>
    </el-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(‘每页’ + val + ‘条’);
      },
      handleCurrentChange(val) {
        console.log(`当前页:`+val);
      }
    },
    data() {
      return {
        total:‘0‘,
        currentPage: 4
      };
    }
  }
</script>

　　另外也发现了一篇比较好的博客，可参考：https://blog.csdn.net/zhumengzj/article/details/78194044?locationNum=6&fps=1

其实也没有什么好的内容，只是今天在做项目时遇到了，并且学习了这个组件，相当于在此做个笔记吧！