精华内容
下载资源
问答
  • iview分页
    2019-07-15 21:16:04
    <Page :total="total" show-total :page-size="size" :current="currentPage" @on-change="getCurrentPage" show-sizer :page-size-opts = [12,50,100,200,500] style="margin-top: 10px;" @on-page-size-change="getCurrentSum"/>
    
    
    
    
    
                    currentPage: 1,
                    size: 12,
                    total: 0,
                getCurrentPage(val) {
                    this.currentPage = val;
                    this.getSellDetail()
                },
                getCurrentSum(val){
                    this.size = val;
                    this.getSellDetail()
                }

     

    更多相关内容
  • vue+iview分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer {...
  • 1.后台代码 public function lists(){ $param=\input('post.'); $page=$param['page']??1; $where['admin']=0; if(!empty($param['name'])){ $where['name']=$param['name'];...

    1.后台代码

    public function lists(){
    			$param=\input('post.');
    			$page=$param['page']??1;
    			
    			$where['admin']=0;
    			
    			if(!empty($param['name'])){
    				$where['name']=$param['name'];
    			}
    			
    			$total=Db::name('user')->where($where)->count();
    			
    			if($total==0){
    				return [200,['total'=>'','data'=>'']];
    			}
    			$data=Db::name('user')->where($where)->page($page,10)->order('time desc')->select();
    			foreach($data as &$v){
    				$v['time']=\date('Y-m-d',$v['time']);
    			}
    			return [200,['total'=>$total,'data'=>$data]];
    		}
    

    2.前台代码

    //data1.total为数据总条数
    <Page :total="data1.total" @on-change="page" show-total />
    

    3.发送请求

    methods:{
    	page(num){
    				// alert(num);//这里的数字num是页码
    				this.list(num);
    	},
    	async list(page=1){
    		this.loading=true;
    		let param={
    			page:page
    		}
    		let res=await this.$api.user.lists(param);
    		if(res){
    			this.data1=res;
    			console.log(res);
    		}
    		this.loading=false;
    	},
    }
    
    展开全文
  • iview分页组件进行二次封装,添加跳转按钮 最近的一个项目要求使用iview进行页面的搭建。项目完成在测试的时候,测试人员说页面的分页组件缺少跳转到某一页的按钮。 我告诉他直接输完页码点回车就好了,但是测试...

    对iview分页组件进行二次封装,添加跳转按钮

    最近的一个项目要求使用iview进行页面的搭建。项目完成在测试的时候,测试人员说页面的分页组件缺少跳转到某一页的按钮。
    在这里插入图片描述
    我告诉他直接输完页码点回车就好了,但是测试说用户不知道回车怎么办。好吧,我还能说些什么呢,改吧,发现iview分页组件没有类似的效果。只能自己上手对iview组件进行改造了。。

    尝试方案一:

    有问题自然想到是度娘,网上的方案几乎都是,使用原生js的模拟事件,通过点击跳转按钮去模拟iview页码输入框的Enter事件。下图是网上的通用做法:
    在这里插入图片描述
    但是,却不太适用于公司的项目。

    最终方案:

    1.template代码

    <div class="pagination">
        <div class="page-content"></div>
        <Page
          :total="total"
          :id="pageId"
          :current="current"
          :page-size="pageSize"
          show-elevator
          show-sizer
          show-total
          :page-size-opts="[10, 20, 30, 50]"
          @on-change="pageChange($event)"
          @on-page-size-change="pageSizeChange($event)"
        />
        <div class="btn">
          <Button type="primary" @click="goPage">跳转</Button>
        </div>
      </div>
    

    2.js代码

    <script>
    export default {
      name: "Pagination",
      components: {},
      props: {
        total: {
          type: Number,
          default: 0,
        },
      },
      data() {
        return {
          pageId: "pageId",
          current: 1,
          max: 0,
          pageSize: 10,
        };
      },
      computed: {},
      watch: {
        total: (val) => {},
      },
      created() {},
      mounted() {},
      destroyed() {},
      methods: {
        pageChange(event) {
          this.$emit("pageChange", event);
        },
        pageSizeChange(event) {
          this.pageSize = event;
          this.$emit("pageSizeChange", event);
        },
        goPage() {
          let max = Math.ceil(this.total / this.pageSize);
          let min = 1;
          let thisPage = document.getElementById(this.pageId);
          let elevtorDiv = thisPage.getElementsByClassName(
            "ivu-page-options-elevator"
          );
    
          if (elevtorDiv && elevtorDiv.length > 0) {
            let pageInput = elevtorDiv[0].getElementsByTagName("input")[0];
            let event = Number(pageInput.value);
            if (event > max) {
              this.current = max;
              event = max;
              pageInput.value = max;
            } else if (event < min) {
              this.current = min;
              event = min;
              pageInput.value = min;
            } else {
              event = Math.floor(event);
              this.current = event;
              pageInput.value = event;
            }
            this.pageChange(event);
          }
        },
      },
    };
    </script>
    
    终于完成了对分页组件的封装,测试人员也测试通过了。代码有很多不足之处,仅供有遇到同样问题的朋友参考。
    展开全文
  • iView分页表格封装

    2020-11-23 09:18:28
    分页:https://www.iviewui.com/components/page 表格:https://www.iviewui.com/components/table <template> <div> <Table ref="table" v-if="!refresh" :loading="loading" :data="showData...

     分页:https://www.iviewui.com/components/page

    表格:https://www.iviewui.com/components/table

    <template>
      <div>
        <Table ref="table" v-if="!refresh" :loading="loading" :data="showData" :columns="columns" stripe :border="border">
        </Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page show-elevator :simple="$isMobile" show-total show-sizer prev-text="上一页" next-text="下一页" :total="total" :current="currentPage"
              @on-change="onPageChange" @on-page-size-change="onPageSizeChange"></Page>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            refresh: false,
            currentPage: 1,
            pageSize: 10
          }
        },
        props: {
          columns: {
            type: Array,
            default: () => []
          },
          data: {
            type: Array,
            default: () => []
          },
          border: {
            type: Boolean,
            default: false
          },
          loading: {
            type: Boolean,
            default: false
          }
        },
        computed: {
          showData: function() {
            var firstIndex = (this.currentPage - 1) * this.pageSize;
            return this.data.slice(firstIndex, firstIndex + this.pageSize);
          },
          total: function() {
            return this.data.length;
          }
        },
        methods: {
          getSelection() {
            return this.$refs.table.getSelection();
          },
          formatDate(date) {
            const y = date.getFullYear();
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
          },
          editRow(index, name, value) {
            var targetIndex = (this.currentPage - 1) * this.pageSize + index;
            this.data.forEach(function(currentValue, currentIndex, arr) {
              if (targetIndex == currentIndex) {
                currentValue[name] = value;
              }
            })
          },
          redraw() {
            this.refresh = true
            this.$nextTick(() => {
              this.refresh = false
            })
          },
          onPageChange(currentPage) {
            this.currentPage = currentPage;
          },
          onPageSizeChange(pageSize) {
            this.pageSize = pageSize;
          }
        }
      }
    </script>
    
    <style>
    </style>
    

     

    展开全文
  • ``` <Table highlight-row :columns="columns1" :loading="loading" :data="userList.list" border @on-selection-change="handleSelectChange"></Table> ``` 我params里写的 ...他没有分页,咋回事啊
  • vue+iview 分页组件 首先看看iview 分页组件的使用方法 1、:total是Page属性,为总条数 2、:current是Page属性,为当前页数 3、:page-size是Page属性,为当前显示数据条数 4、show-elevat对应html 图中跳至1页 5、...
  • iview分页查询时遇到的坑

    千次阅读 2018-12-07 13:44:45
    //分页 pageChange(page) { this.startRow = page; this.query(page); }, pagesizechange(page) { this.startRow = 1; this.endRow = page; this.query(1); }, //查询 query(startRow) { let date1 = ...
  • 这是我得父组件 ``` ref="table" :data="arrList" :columns="currColumns" ... :page-size-opts="[10,20,30]" @on-page-size-change="pagesizechange" show-sizer ...不管输入几都变为1
  • 结合iview组件封装的一个分页功能组件,点击下一页上一页,每页显示条数,切换对应的数据
  • 问题描述:若当前页码不在第1页,进行切换 page-size 操作,会同时触发on-page-size-change 和on-change 事件。(因为 pageSize 的切换会引发页码跳回第一页。而事件触发顺序是 onSizeChange ->...
  • 正常使用 <Page :total="total" show-elevator show-total :page-size="pageSize" :current.sync="currentPage" @on-change="pagesizeChange
  • iview 分页------记录

    2020-06-04 11:52:12
    iview提供的分页方法 title: '#', type: 'index', width: '50px', 每一页都是从1-10记录 如果第一页1-10,第二页11-20 title: '#', type: 'index', width: '50px', indexMethod: (params) => { return ...
  • iview 分页的案例

    2017-07-23 12:43:00
    //html部分 //js部分 转载于:https://www.cnblogs.com/zhujiasheng/p/7224271.html
  • iview分页组件二次封装

    千次阅读 2019-12-12 16:34:30
    * 基于iview分页组件,配置服务端的pageDto * * @author oralinge */ export default { components: { Page }, props: { // pageDto value: { type: Object, default: function () { return { '...
  • 第一步: 第二步: 第三步: 第四步(切换页码请求接口的情况): 第五步(切换页码不请求接口的情况): ...Input v-model="entryName" placeholder="请输入项目名称..." style="margin-left:20px" clearable>...
  • iview分页器删除后的坑 iview分页器删除最后一页数据怎样跳转上一页 假如数据有21条,你删除第21条,iview不会自动跳转到你的上一页,会在页面显示暂无数据,这时候我们就要看page是否传输正确的页码 直接上代码吧 ...
  • vue+iview 分页及查询功能实现

    千次阅读 2019-07-01 11:12:01
    vue+iview 分页及删、查功能实现 ​ 首先要想实现分页功能必须得知道 当前页码、每页大小、总数目。 iview分页的功能支持还是很强大的,有很多钩子函数 具体实现看后端返回的数据 <template> <div v-if=...
  • vue+iview 封装分页组件

    2020-10-21 18:31:55
    vue+iview分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer...
  • iview提供page分页搭配 table进行分页和展示数据 一、分页数据展示如图 tips:需要后端传入总条数total,页数pageNum,每页展示条数pageSize table里要传入Data数据 二、引入组件 <head lang="en"> <meta ...
  • 需要全选计算所有页面的数据总和,但是ivew table 全选都是选中当前页面的所有数据,要是前端处理的话肯定要后端将所有数据返回过来,每一次后端返回十条数据肯定是不行的,然后做一个前端分页,请求一次获取所有...
  • (vue)iView每页显示条数和分页实现
  • vue+iview 分页及删、查功能实现,供大家参考,具体内容如下 首先要想实现分页功能必须得知道 当前页码、每页大小、总数目。 iview分页的功能支持还是很强大的,有很多钩子函数 具体实现看后端返回的数据 $...
  • vue iview实现分页功能

    千次阅读 2019-09-20 16:09:45
    子组件 <template> <div style="margin-top: 30px;"> <Page :total="paginations.total" show-elevator show-sizer :page-size="paginations.pageSize" :show-to...
  • 使用vue+iview ,Page实现前端分页处理 <div class="section"> <ul> <li v-for="item in homeList" :title="item.title" @click="emitPage(item.pid)">{{item.title}}</li> </ul> ...
  • 文章目录1. 使用 文章注释非常详细,就不过多解释。 1. 使用 page:当前第几页 pageSize :每页多少行 { title: '序号', width: 60, align: 'center', render: (h, params) =>... return h('spa...
  • iview里,分页组件的电梯功能输入页码后需要按回车才能跳转 这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~ <div class="overflow-h mt10"> <span class="fr mt5 ml10"> <...
  • Vue+iview---分页功能的实现

    千次阅读 热门讨论 2019-03-18 19:58:12
      订单系统前端使用vue框架,基于iview组件。当显示到表格的数据过多时,会进行分页处理。当然,分页有真分页和假分页,本次我们采用的是假分页。 方法介绍  1.整体介绍  2.基本表格分页  2.1 查询按钮绑定...

空空如也

空空如也

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

iview分页

友情链接: world.zip