Element离线使用 -分页功能

引入element后，由于网络速度较慢，发现页面运行起来，比较卡顿，于是将其下载到本地

1.下载静态资源

element-ui 官网：http://element-cn.eleme.io/#/zh-CN/component/installation

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

复制网址https://unpkg.com/element-ui/lib/theme-chalk/index.css, 浏览器打开，您会看到密密麻麻的css代码

在这里插入图片描述

先Ctrl + A ,然后Ctrl + C，新建一个文件，命名为element-index.css（命名随意）

js 如法炮制（命名随意）

2.页面引入

将下载好的文件引入到自己的项目

在这里插入图片描述

页面引入

<link rel="stylesheet" type="text/css" href="js/vue/element-ui/element-ui.css">
<script  src="js/vue/element-ui/element-ui.js"  ></script>

注意：由于element-ui是基于vue的所以再引入ui之前，一定要先引入一下Vue的js文件

3.以分页为例

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>