zoukankan      html  css  js  c++  java
  • elemnt-ui 分页封装

    <!-- 分页查询
    
    <el-Page :pager="pages" @setPager="pageData" @query="request"></el-Page>
     
    pages:{
                count: 1000,   // 总记录条数
                page: 1,       // 第几页
                rows:10 ,      // 显示条数
          }
    -->
    
    <template>
      <div class="mod-paging-query fn-clear">
        <el-pagination
          small
          class="fn-right"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :pager-count="7"
          :total="pager[props.total]"
          :current-page.sync="pager[props.page]"
          :page-size="pager[props.rows]"
          :page-sizes="[10, 15, 30, 50]"
          @size-change="onChangeSize"
          @current-change="onChangePage">
        </el-pagination>
        <span v-if="refresh" class="btn-refresh fn-right" title="刷新" @click="$emit('query')">
          刷新
        </span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'PagingQuery',
      props: {
        pager: {
          type: Object,
          required: true,
        },
        refresh: {
          type: Boolean,
        },
        props: {
          type: Object,
          required: false,
          default: () => ({
            page: 'page',   // 第几页
            rows: 'rows',   // 显示条数
            total: 'count', // 总记录条数
          }),
        },
      },
      // 设置绑定参数
      model: {
        prop: 'pager',
        event: 'setPager',
      },
      computed: {
        total() {
          return this.pager[this.props.total] || 0;
        },
        // 检测获取到的数据是否为空
        isEmptyList() {
          return Math.ceil(this.pager[this.props.total] / this.pager[this.props.rows]) < this.pager[this.props.page];
        },
      },
      watch: {
        total() {
          // 存在记录但未获取到数据时, 重新请求
          if (this.pager[this.props.page] > 1 && this.isEmptyList) {
            this.$emit('setPager', Object.assign(this.pager, {
              [this.props.page]: this.pager[this.props.page] - 1,
            }));
            this.$emit('query');
          }
        },
      },
      methods: {
        // 每页条数
        onChangeSize(rows) {
          const temp = {
            [this.props.rows]: rows,
            // 当显示条数小于或等于总条数时,重置页数
            [this.props.page]: rows <= this.total ? 1 : this.pager[this.props.page],
          };
    
          this.$emit('setPager', Object.assign(this.pager, temp));
          // 触发父组件查询请求
          this.$emit('query');
        },
        // 翻页
        onChangePage(page) {
          this.$emit('setPager', Object.assign(this.pager, { [this.props.page]: page }));
          this.$emit('query');
        },
      },
    };
    </script>

    为什么要我输入内容!

  • 相关阅读:
    VS生成事件时复制文件到指定位置
    Windows服务BAT命令-安装、卸载、启动、停止
    Lambda表达式动态组装查询条件
    动软模板使用流程
    使用jquery.qrcode生成二维码
    MySQL报错:Packets larger than max_allowed_packet are not all
    Excel操作之VLOOKUP函数
    Visual Studio 编辑器打开项目后,一直提醒Vs在忙,解决方法
    使用BaiDu Java Script Web Api 在Web开发中嵌入地图使用步骤
    C#或Net连接Oracle操作提示 Oracle 客户端 version 8.1.7 或更高版本报错
  • 原文地址:https://www.cnblogs.com/wxqworld/p/11856020.html
Copyright © 2011-2022 走看看