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

╰半夏微凉° 2023-01-10 14:37 143阅读 0赞

根据element-ui的官方文档     官网地址:[http://element.eleme.io/\#/zh-CN][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-pagination
>         layout="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-pagination
>         layout="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官方文档

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

[http_element.eleme.io_zh-CN]: http://element.eleme.io/#/zh-CN