ElementUI分页详解

一、ElementUI分页器bug

使用ElementUI分页器时，可能会出现bug，比如分页器数字显示不正常、翻页之后表格数据不更新等等。这主要是由于分页器使用时没有考虑到某些细节问题。

解决这个问题可以尝试以下几个方法：

1、检查分页器设置：在使用分页器时，一定要仔细检查各个属性是否设置正确。比如total属性是否正确设置为数据总数，pageSize是否设置为每页显示的数据条数，page-size是否设置为页码按钮数量等。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>

2、手动强制刷新：在表格的实例中添加一个key属性，并将其设置为一个变量。在需要强制刷新的时候，可以通过修改这个变量的值来强制刷新表格和分页器。

<el-table
  :data="tableData"
  :key="tableKey"
  :default-sort="{prop: 'date', order: 'descending'}"
>
  <el-table-column
    prop="date"
    label="日期"
    sortable
    width="120"
  >
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="120"
  >
  </el-table-column>
</el-table>
export default {
  data() {
    return {
      tableKey: 1,
      tableData: [
        {
          date: '2022-01-01',
          name: 'Tom'
        }
      ]
    }
  },
  methods: {
    refreshTable() {
      this.tableKey += 1
    }
  }
}

3、使用watch监听：使用watch来监听页码变化，手动修改分页器绑定的currentPage值，以达到刷新数据的目的。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 此处根据当前页码请求对应的数据
      // ...
    }
  }
}

二、ElementUI表格添加索引

在ElementUI表格中，如果需要添加一列索引，可以使用表格的slot来实现。

<el-table
  :data="tableData"
  :default-sort="{prop: 'date', order: 'descending'}"
  style="width: 100%"
>
  <el-table-column
    label="编号"
    slot="index"
    width="100"
  >
    <template slot-scope="{ $index }">
      <span>{{ $index + 1 }}</span>
    </template>
  </el-table-column>
  <el-table-column
    prop="date"
    label="日期"
    sortable
    width="120"
  >
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="120"
  >
  </el-table-column>
</el-table>

三、ElementUI分页器样式修改

ElementUI默认的分页器样式可能会与某些网站的UI不一致，需要对其进行修改。可以通过以下方式来实现分页器样式的修改。

1、使用scoped样式：在使用分页器的组件中添加scoped样式，并对分页器中的class进行样式覆盖。

<template>
  <el-pagination
    v-model="currentPage"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="total"
    :page-size-choices="[10, 20, 30, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    class="my-pagination"
  >
  </el-pagination>
</template>
<style scoped>
.my-pagination {
  /* 样式覆盖 */
}
</style>

2、使用全局样式：在全局样式中对ElementUI中的分页器样式进行覆盖。

/* 全局样式 */
.el-pagination {
  /* 样式覆盖 */
}

四、ElementUI分页page不生效

在使用ElementUI分页器时，可能会遇到page属性不生效的情况。

解决这个问题可以尝试以下几个方法：

1、检查pageSize属性：分页器的pageSize属性设置的是每页显示的数据条数，如果pageSize过小，page就会失效。可以尝试将pageSize设置为更大的值，比如50，100。

2、检查total属性：分页器的total属性设置的是总数据条数，如果total设置不正确，就会影响到分页器的page属性。可以尝试修改total的值。

3、手动修改page：可以使用watch来监听pageSize和total属性的变化，并手动修改page。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-count="pageCount"
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码请求对应的数据
      // ...
    }
  },
  watch: {
    pageSize(newVal, oldVal) {
      this.currentPage = 1
    },
    total(newVal, oldVal) {
      this.currentPage = 1
    }
  }
}

五、ElementUI分页器

ElementUI分页器是网页中常见的一种组件，主要用于分页展示数据。在使用分页器时，需要注意以下几点：

1、分页器的total属性必须设置为总数据条数。

2、分页器的pageSize属性必须设置为每页显示的数据条数。

3、分页器的currentPage属性必须设置为当前页码。

4、分页器的@current-change事件必须绑定一个方法，用于监听页码变化。

5、分页器的layout属性用于设置分页器的布局，可以自定义。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码请求对应的数据
      // ...
    }
  }
}

六、ElementUI分页二次封装

在实际开发中，我们会发现ElementUI提供的分页器并不满足我们的需求，需要对分页器进行二次封装。

封装的过程主要包括以下几个步骤：

1、封装分页器：将ElementUI分页器封装成一个组件，并对其进行扩展，添加一些自己需要的属性。

<template>
  <el-pagination
    v-model="currentPage"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
export default {
  name: 'MyPagination',
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('change', val)
    }
  }
}

2、引入组件：在需要使用分页器的组件中引入自定义的分页器组件，并绑定事件，以便在当前组件中监听页码变化。

<template>
  <my-pagination
    :page-size="pageSize"
    :current-page="currentPage"
    :total="total"
    @change="handleChange"
  >
  </my-pagination>
</template>
import MyPagination from '@/components/MyPagination'
export default {
  components: {
    MyPagination
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 0
    }
  },
  methods: {
    handleChange(page) {
      this.currentPage = page
      // 根据当前页码请求对应的数据
      // ...
    }
  }
}

七、ElementUI分页属性

在使用ElementUI分页器时，有一些属性是比较容易被忽略的。以下是常用的一些分页属性：

1、pageSize：每页显示的数据条数。

2、total：总数据条数。

3、page-size-choices：每页可选的数据条数。

4、layout：分页器的布局。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码请求对应的数据
      // ...
    }
  }
}

八、ElementUI分页刷新后回到第一页

在一些场景中，我们需要在分页刷新后将页码重置为第一页。可以使用watch来监听pageSize和total属性的变化，并在变化时重置currentPage为1。

<el-pagination

  v-model="currentPage"

  :current-page.sync="currentPage"

  :page-size="pageSize"

  :total="total"

  :page-size-choices="[10, 20, 30, 50]"

  layout="total, sizes, prev, pager, next, jumper"

  @current-change="handleCurrentChange"

>

</el-pagination>

export default {

  data() {

    return {

      currentPage: 1,

      pageSize: 10,

      total: 50

    }

  },

  methods: {

    handleCurrentChange(val) {

      this.currentPage = val 

                                                        
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/196144.html