element分页

分页显示
1.引入element插件(在main.js中)

在这里插入代码片
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

**2.在需要显示的页面添加:**
                <!-- 分页 -->
                <!-- total总条目数  page-size:每页多少条-->
                <div class="fenye">
                  <el-pagination
                    layout="prev, pager, next,total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="size"
                      <!--size是每页显示多少条-->
                    :total="content"
                      <!--这里的content是后端传来的总条数-->
                  >
                  </el-pagination>
                </div>

**3.方法发送请求并传参**
   export default {
    data() { 
    return{
    <!--这里是我自己定义的-->
      content: 0,
      size: 5,
      }

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      var that = this;
      this.currentPage = val;
      console.log(`aaaa当前页: ${val}`);
      $.ajax({
        headers: {
          "Authori-zation": "ZhaoJunQiu ",
        },
        type: "GET",
        data: {
          role: localStorage.getItem("role"),
            <!--传参-->
          pageNum: this.currentPage,
          pageSize: 4,
        },
        url: "/apk/returnSubjectExamine",
        success: function (res) {
          that.content = res.data.count;
            <!--下面是日期的显示不用管-->
          that.lista = res.data.list.map((el) => {
            let obj = Object.assign({}, el);
            obj.createTime = new Date(
              +new Date(obj.createTime) + 8 * 3600 * 1000
            )
              .toISOString()
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, "");

            return obj;
          });
        },
      });
    },