vue+ElementUI(el-pagination)+express实现分页功能（前后台）

如光不息丶

已于 2022-03-29 17:58:59 修改

阅读量812

点赞数 2

分类专栏： vue.js express node.js 文章标签： vue node.js 前端 javascript

于 2020-12-22 17:49:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42088314/article/details/111562475

版权

前台部分

1、安装elemenUI、axios：

npm i element-ui -S
npm install axios --save
npm install vue-axios --save

在main.js中引用：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //样式文件单独引入
Vue.use(ElementUI); #全局注册

import axios from "axios"
Vue.prototype.$axios = axios

2、在需要的vue页面中使用


<template>
	<!-- 信息列表展示开始 -->
      <div class="ihtor_table">
		//:data="tableData"绑定计算属性中的tableData, prop为需要展示的字段名
        <el-table class="elTable" :data="tableData" border style="width: 100%">
          <el-table-column prop="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="250">
          </el-table-column>
          <el-table-column prop="classes" label="类别" width="160">
          </el-table-column>
          <el-table-column prop="grade" label="级别" width="139">
          </el-table-column>
        </el-table>
      </div>
    <!