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/zh-tw/n/196144.html