精华内容
下载资源
问答
  • Vue 分页

    2019-03-28 15:37:40
    vue 分页 预览图: 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 分页- 菜鸟教程(runoob.com)</title> <style> ul,li {margin:0;...

    vue 分页

    预览图:
    预览
    完整代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 分页- 菜鸟教程(runoob.com)</title>
    <style>
    	ul,li {margin:0;padding:0;list-style: none;display: inline-block;user-select: none;}
    	li{font-size: 15px; color: #1890ff;}
    	a{display: block;padding: 10px 15px; cursor:pointer;border: 1px solid #1890ff;margin:0 0 0px -1px;}
    	li.active a{background:#1890ff;color:#fff;}
    	a:hover {background:#e8e8e8;color:#333;}
    	a.disable-btn {cursor: not-allowed;}
    	
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-if="cur == 1"><a class="disable-btn">上一页</a></li>
    		<li v-if="cur > 1" @click="cur--"><a>上一页</a></li>
    		<li v-for="item in indexs" :key="item" @click="btnClick(item)" :class="{'active': cur == item}"><a>{{item}}</a></li>
    		<li v-if="cur != all" @click="cur++"><a>下一页</a></li>
    		<li v-if="cur == all"><a class="disable-btn">下一页</a></li>
    	</ul>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        all: 10,
    	cur: 1
      },
    methods: {
    	btnClick(item) {
    		if(item != this.cur) {
    		  this.cur = item;
    		}
    	
    	}
    },
    computed: {
       indexs() {
         let left = 1;
    	 let right = this.all;
    	 let arr = [];
    	 if(this.all >= 7) {
    	     if(this.cur > 4 && this.cur < this.all - 3) {
    		    left = this.cur - 3;
    			right = this.cur + 3;
    		 } else if(this.cur <= 4){
    		    left = 1;
    			right = 7;
    		 } else {
    		    left = this.all - 6;
    			right = this.all;
    		 }
    	 }
    	  while (left <= right) {
    	    arr.push(left);
    		left++;
    	  }
    	   return arr;
       
       }
    }
    })
    </script>
    </body>
    </html>
    
    展开全文
  • vue分页

    2020-09-10 14:12:41
    vue分页 1、html <div class="block"> <span class="demonstration">完整功能</span> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current...

    vue分页

    1、html

    注意::data=“dataWithPage” 表格显示多少条用计算属性computed里面的dataWithPage方法

      <!--表格-->
      <template>
        <!--:data="dataWithPage" 表格显示多少条用计算属性computed里面的dataWithPage方法 -->
        <el-table
          :data="dataWithPage"
          style="width: 100%">
          <!--序号-->
          <el-table-column
            prop="number"
            label="序号"
            width="180">
          </el-table-column>
          <!--姓名-->
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
        </el-table>
      </template>
      <!--分页-->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="tableData.length">
        </el-pagination>
      </div>
    

    2、JavaScript

      export default {
        //计算属性
        computed: {
          limitData() {
            let data = [...this.tableData];  //用data接收要分页的表格,再返回data
            return data;
          },
          // 因为要动态计算总页数,所以还需要一个计算属性来返回最终给 Table 的 data
          dataWithPage() {
            const data = this.limitData;
            const start = this.currentPage * this.size - this.size;
            const end = start + this.size;
            return [...data].slice(start, end);
          },
        },
        
        methods: {
          //跳转页面
          handleCurrentChange(val) {
            this.currentPage=val;
            console.log(`当前页: ${val}`);
          }
        },
        
        data() {
          return {
            size: 1,
            currentPage: 1,
          };
        }
      }
    
    展开全文
  • Vue分页

    2021-01-31 00:03:27
    下面是对分页功能的整理,希望可以帮助到有需要的小伙伴~ 文章目录分页样式分页方法 分页样式 分页样式是使用element-ui实现的,使用element-ui中的组件的时候要提前引用 <!-- 分页区域 --> <!-- data() ...

    下面是对分页功能的整理,希望可以帮助到有需要的小伙伴~

    分页样式

    在这里插入图片描述
    分页样式是使用element-ui实现的,使用element-ui中的组件的时候要提前引用

    <!-- 分页区域 -->
          <!-- data() 的 queryInfo值 有 pagenum、pagesize 可以用来表示分页数据
            // 当前的页数
            pagenum: 1,
            // 当前每页显示多少条数据
            pagesize: 2, 
          -->
          <!-- size-change方法 -- 切换煤业显示多少条数据 -->
          <!-- page-size 每页显示的数据(可选) -->
          <!-- page-size 【当前页】显示多少条数据 -->
          <!-- layout 页面上显示的分页布局 -->
          <!-- total 总共有多少条数据 -->
    
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
    

    分页方法

    <script>
    export default{
    // 数据
      data() {
      	return {
          // 获取用户列表的参数对象
          queryInfo: {
            query: '',
            // 当前的页数
            pagenum: 1,
            // 当前每页显示多少条数据
            pagesize: 2,
          },
          // 如果 取用户列表数据 成功
          // userlist 存储的用户数据
          // total  数据的总条数
    
          userlist: [],
          total: 0,
          editDialogVisible: false,
          // 查询到的用户信息对象
          editForm: {},
      },
      // 生命周期函数
      // 在生命周期函数中,发起当前的 获取用户列表数据请求
      created() {
        this.getUserList()
      },
      methods: {
      // 获取用户列表数据请求 的 方法
        async getUserList() {
          // users 是 请求路径
          // {params:{}} 是 get请求 携带的参数
          // 把 携带的参数 放到 data()中 比较好
          // 异步请求会返回一个data属性,{data: res} 把data属性重命名为res
          const { data: res } = await this.$http.get('users', {
            params: this.queryInfo,
          })
          // 如果 获取用户列表数据 失败
          if (res.meta.status !== 200) {
            return this.$message.error('获取用户列表失败!')
          }
          // 给 userlist 赋值
          this.userlist = res.data.users
          // 给 total 赋值
          this.total = res.data.total
          // 输出 用户列表数据
          console.log(res)
        }
    
      	handleSizeChange(newSize) {
          // 监听 pagesize 改变的事件
          // console.log(newSize)
          this.queryInfo.pagesize = newSize
          this.getUserList()
        },
        
        // 监听页码值 改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.pagenum = newPage
          this.getUserList()
        }
      }
    
    }
    </script>
    
    
    展开全文
  • vue 分页

    2020-04-28 20:07:00
    分页效果实现 思路: 1.每页显示的数量 2.当前页数 3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...

    分页效果实现

    在这里插入图片描述
    思路:
    1.每页显示的数量
    2.当前页数
    3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>分页</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .pagination {
                margin: 20px 0;
            }
            .pagination a {
                padding: 5px 15px;
                border: 1px solid yellowgreen;
                text-decoration: none;
                margin: 5px;
            }
            /* 点按钮变色 这里只是提前写好样式 如果为true在会变色 */
            .pagination a.active {
               background : #3ba9ff;
               color: white;
            }
        </style> 
    
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="user in newUser":key="user.id">
                    {{user.name}}
                </li>        
            </ul>
                
            <!--         这里绑定总页数                  父组件传过来参数 复用件接收后判断如果为true执行css样式  --> 
            <p-pagination :pages=showUsers @click-pag="fn" :page = 'uPage'> </p-pagination> 
                             
        </div>
        <script>
            Vue.component("p-pagination",{
                template: `
                            <div class="pagination">    
                                <a href="javascript:;" @click='deduction'>上一页</a>  
    
                                <a href="javascript:;" v-for="pag in pages" @click="goto(pag)"                         
                                :class="{active: pag === page}"
                                >{{pag}}</a>
    
                                <a href="javascript:;" @click='score'>下一页</a>   
                            </div>                                           
                          `,
                props:['pages','page'],//接收参数 
                methods: {
                    goto(pag){            //点击按钮给父组件传参  这里的参数也可以直接使用pag
                        this.$emit("click-pag",pag);
                        // console.log(this.pages);
                        console.log(this.page)        
                    },
                    // 上一页
                    deduction(){
                        if(this.page - 1 >0){             
                            this.$emit("click-pag",this.page-1);
                         }else{
                            this.page = 1
                         }                      
                    },  
                    // 下一页
                    score(){  //若果是最后一页 
                        if(this.page >= this.pages ){    
                            this.page = this.pages            
                        }else{
                            this.$emit("click-pag",this.page+1);  
                        }   
                    },
                }
            });
            let app = new Vue({
                el:"#app",
                data:{
                    users:[
                        {id:1,name:'小王'},
                        {id:2,name:'小红'},
                        {id:3,name:'小明'},
                        {id:4,name:'小丽'},
                        {id:5,name:'小东'},
                        {id:6,name:'小花'},
                        {id:7,name:'小李'},  
                                       
                    ],
                    uPage:1, //当前页
                    perPage:2, //每页显示多少条
                    
                },
                computed: {
                    // 获取总页数 
                    showUsers:{  
                        get(){
                            return Math.ceil(this.users.length / this.perPage); 
                        }
                    },
                    newUser:{ //渲染到页面
                        get(){ // 分割数据
                            return JSON.parse(JSON.stringify(this.users)).splice((this.uPage-1)*this.perPage , this.perPage)
                        }
                    },
                },
    
                methods: {
                    fn(n){
                        // console.log(n)
                        this.uPage = n;  //接收到 子组件传过来的数据 修改data的显示
                    },
             
                 },             
            });
        </script>
    </body>
    </html>
    
    展开全文
  • VUE分页

    2018-05-14 17:17:00
    VUE.JS 分页 参考链接:https://blog.csdn.net/onlyjin/article/details/78393218 转载于:https://www.cnblogs.com/yxw699/p/9037099.html
  • vue 分页组件 网页 (vue-lpage)... 低级Vue分页组件 This is a low-level, ui-agnostic pagination component. 这是一个底层的,与用户界面无关的分页组件。 You pass it an array of data, the current page ind...
  • vue分页组件vue2

    2019-08-12 03:33:22
    vue 分页组件 vue2
  • vue 分页

    2017-10-22 22:39:55
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ul { margin: 0; padding: 0; list-style: none; } .table { display: table; border-collapse: collapse; border: 1px solid #ccc; } ...
  • vue 分页组件 vue-ads分页 (vue-ads-pagination) Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a ...
  • vue 分页组件 vue-ads分页 (vue-ads-pagination) Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. Vue广告分页vue js分页组件。 在...
  • Vue分页插件

    2019-01-08 08:43:09
    Vue分页插件,直接放到HTML页面即可使用。不需要做多余的修改
  • Vue分页组件.vue

    2019-06-22 09:56:34
    (原创)这是一个功能比较完善的vue分页组件,包含基本的数据统计,页面跳转,修改每页显示条数,当前页居中显示等,有兴趣的可以直接拿来用。
  • vue分页功能.rar

    2019-07-17 10:23:46
    vue2.0实现多种分页功能,采用bootstrap框架,让您快速实现vue分页
  • Vue分页组件实例代码

    2020-08-30 19:42:57
    主要为大家详细介绍了Vue分页组件的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • A vue pagination component 一个vue分页组件
  • 主要为大家详细介绍了Vue分页器实现原理,编写了分页器组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 分页组件 Vue-Plain分页 (vue-plain-pagination) A simple pagination component for Vue. Vue的简单分页组件。 依存关系 (Dependencies) Vue.js 2 - progressive JavaScript framework Vue.js 2-渐进式...
  • 主要介绍了vue分页插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue分页效果与购物车功能,本文图文实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue分页导航

    2020-12-11 11:25:02
    Vue分页导航原文链接:https://www.cnblogs.com/vivaxiaonan/p/9987985.html 这里我用的是脚手架,粘Viva_nan大佬的代码封装了一个.vue组件。 实现效果如下: 封装组件 newCom.vue 代码: <template> &...
  • Vue分页展示

    2020-04-16 13:24:02
    Vue分页展示 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <style> li{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,314
精华内容 2,125
关键字:

vue分页

vue 订阅