ElementUI 分页组件二次封装

更新记录:

  • 修复了删除当前所有数据未触发退回上一页问题。
  • 改善了调用方式,仅需传入分页对象与绑定查询事件。
  • 改为通过 model 更新分页对象。
  • 修复了IE下,输入页码回车会触发整个页面刷新问题

调用方式:

<template>
  <paging-query :pager="pager" @query="getItemList"/>
</template>

<script>
import PagingQuery from '@/components/PagingQuery';

export default {
  components: {
    PagingQuery,
  },
  data() {
    pager: {
       count: 0,
       page: 1,
       rows: 15,
     },
  },
  methods: {
    // 查询请求
	getItemList() {}
  },
</script>

paging-query.vue

<!-- 分页查询
<pager-query :pager=[分页对象] @query=[列表查询方法] />
-->

<template>
  <form class="mod-paging fn-clear" @submit.prevent>
    <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="pageSizes"
      @size-change="onChangeSize"
      @current-change="onChangePage"
    ></el-pagination>
    <el-button icon="el-icon-refresh" @click="$emit('query')">刷新</el-button>
  </form>
</template>

<script>
import config from '@/config/app.config';

export default {
  name: 'Paging',
  // 设置绑定参数
  model: {
    prop: 'pager',
    event: 'setPager',
  },
  props: {
    pager: {
      type: Object,
      required: true,
    },
    refresh: {
      type: Boolean,
    },
    pageSizes: {
      type: Array,
      default: () => ([10, 15, 30, 50]),
    },
    props: {
      type: Object,
      required: false,
      default: () => ({
	    // 第几页
	    page: 'page',
	    // 显示条数
	    rows: 'rows',
	    // 总记录条数
	    total: 'count',
	  }),
    },
  },
  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.$nextTick(() => {
          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.$nextTick(() => {
        this.$emit('query');
      });
    },
    // 翻页
    onChangePage(page) {
      this.$emit(
        'setPager',
        Object.assign(this.pager, { [this.props.page]: page })
      );
      this.$emit('query');
    },
  },
};
</script>
以下是一个简单的 Vue 2 和 Element UI 表格二次封装的示例代码: ``` <template> <el-table :data="pageData" :default-sort="{prop: 'id', order: 'ascending'}"> <el-table-column label="ID" prop="id" sortable /> <el-table-column label="姓名" prop="name" /> <el-table-column label="年龄" prop="age" /> <el-table-column label="性别" prop="gender" /> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" @click="handleDelete(scope.row)">删除</el-button> </template> </el-table-column> <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </el-table> </template> <script> export default { props: { tableData: { type: Array, required: true, }, pageSize: { type: Number, default: 10, }, }, data() { return { currentPage: 1, }; }, computed: { pageData() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.tableData.slice(start, end); }, }, methods: { handleEdit(row) { // 编辑操作 console.log('编辑', row); }, handleDelete(row) { // 删除操作 console.log('删除', row); }, handleSizeChange(pageSize) { this.pageSize = pageSize; }, handleCurrentChange(currentPage) { this.currentPage = currentPage; }, }, }; </script> ``` 此示例中,将表格数据和每页显示的数据量通过 props 传入组件。使用计算属性 pageData 计算当前页应该显示的数据。在表格下方添加分页组件,使用 v-model 绑定 currentPage,使用 @size-change 和 @current-change 监听分页组件的事件,调用对应的方法进行相应操作。同时,使用 Element UI 的 el-table-column 组件中的 sortable 属性可以实现列排序。 通过这样的封装,可以使表格组件更加通用、简洁,避免重复的代码编写。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值