vue-cli安装element-ui并使用分页组件

根据element-ui的官方文档官网地址:http://element.eleme.io/#/zh-CN

使用npm或者cnpm(淘宝镜像)执行下面命令即可安装

npm install element-ui -S

在main.js中引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

即可正常使用element-ui及相关组件,也可根据官方文档按需引入

element-ui分页组件:

方法一数据绑在div上:

<template>
<div><div v-for="(value,index) in info.slice((currentPage- 1)*pagesize,currentPage*pagesize)">...</div><el-paginationlayout="prev, pager, next":page-size="pagesize"    //每页多少条数据@current-change="current_change" //currentPage改变时会触发:current-page.sync="currentPage" //当前页:pager-count="5" //页码按钮数量:total="info.length"> //total总共多少条数据 </el-pagination>
</div>
</template><script>
export default {data(){return{info:[],//数据pagesize:5,//每页多少数据currentPage:1  //默认当前页为第一页}},methods:{current_change(currentPage){  //改变当前页this.currentPage = currentPage}},mounted(){  //如果使用数据接口axios.get('/api',{params:{//请求参数}}).then(res => {this.info = res.data //赋值})}
}
</script>

方法二数据绑在el-table上:

<template>
<div><el-table :data="info"></el-table><el-paginationlayout="prev, pager, next":page-size="pagesize"    //每页多少条数据@current-change="current_change" //currentPage改变时会触发:current-page.sync="currentPage" //当前页:pager-count="5" //页码按钮数量:total="info.length"> //total总共多少条数据 </el-pagination>
</div>
</template><script>
export default {data(){return{info:[],//数据pagesize:5,//每页多少数据currentPage:1  //默认当前页为第一页}},methods:{current_change(currentPage){  //改变当前页this.currentPage = currentPage}},mounted(){  //如果使用数据接口axios.get('/api',{params:{//请求参数}}).then(res => {this.info = res.data //赋值})}
}
</script>

以上安装部分的内容和组件使用方法来源于element-ui官方文档

注:分页组件的难点在于如何绑数据

vue-cli使用element-ui分页组件相关推荐

vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...

vue-cli使用element-ui分页组件

vue-cli安装element-ui并使用分页组件

vue-cli使用element-ui分页组件相关推荐

最新文章

热门文章