vue3 el-pagination 將組件中英文‘goto’ 修改為中文到‘第幾’

更新時間：2024年02月26日 09:55:59 作者：PXY_J

這篇文章主要介紹了vue3 el-pagination 將組件中英文‘goto’ 修改為中文到‘第幾’,通過實例代碼介紹了vue3項目之Pagination 組件,感興趣的朋友跟隨小編一起看看吧

vue3 el-pagination 將組件中英文‘goto’ 修改為中文到‘第幾’

效果如圖：

要求：將英文中Go to 改為到第幾

操作如下：

<template>
  <div class="paging">
    <el-config-provider :locale="zhCn"> // 注意：這是重要部分
      <el-pagination    //分頁組件根據(jù)官網(wǎng)
        v-model:current-page="page.currentPage"
        v-model:page-size="page.pageSize"
        :background="page.background"
        :layout="page.layout"
        :total="page.total"
        @size-change="page.handleSizeChange"
        @current-change="page.handleCurrentChange"
      />
    </el-config-provider>
  </div>
</template>
<script setup>
// 在調(diào)用 分頁組件el-pagination的頁面：
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
zhCn.el.pagination.goto = "到第"
</script>

補充：

vue3項目之Pagination 組件

Pagination 組件

官方文檔：https://element-plus.gitee.io/zh-CN/component/pagination.html

我們把分頁器封裝成一個公共組件，普通分頁器只需要兩個參數(shù)：

選擇一：page-size 每頁的數(shù)量 + total 總數(shù)量

選擇二：page-count 總頁數(shù) + total 總數(shù)量

外加一個回調(diào)函數(shù)：current-change 當(dāng)點擊分頁器時就會觸發(fā)

Pagination 組件模板

<script setup lang="ts">
import { ElLoading } from 'element-plus'
const emits = defineEmits<{
    (e: 'pageChange', num: number): void
}>()
const props = defineProps<{
    total: number,
    pageSize: number
}>()
// 切換頁面回調(diào)函數(shù)
function currentChange(p: any) {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(255, 255, 255, 0.7)',
    })
    // 調(diào)用父組件切換頁面回調(diào)函數(shù)
    emits('pageChange', p)
    setTimeout(() => { loading.close() }, 500)
}
</script>
<template>
    <el-pagination 
        :page-size="pageSize"
        :total="total" 
        @current-change="currentChange"
        顯示屬性           
        layout="prev, pager, next" 
        hide-on-single-page
        next-text="下一頁"
        prev-text="上一頁"
    />
</template>
<style scoped>
.el-pagination {
    margin: 30px auto;
    justify-content: center;
}
</style>

父組件引用

// 從 vuex 中獲取參數(shù)（也可以直接在組件中定義）
const roomList = computed(() => store.state.roomList)
const roomTotal = computed(() => store.state.roomTotal)
const roomPageSize = computed(() => store.state.roomPageSize)
// home頁數(shù)改變回調(diào)函數(shù)
async function roomPageChange(pageNo: any) {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(255, 255, 255, 0.7)',
    })
    page.value = pageNo
    await store.dispatch('getRoomList', { pageNo, cityCode: city.value })
    setTimeout(() => { loading.close() }, 500)
}

<!-- 分頁器 -->
<Pagination 
    @pageChange="roomPageChange" 
    :total="roomTotal" :pageSize="roomPageSize"
/>

發(fā)送請求的過程

在 vuex 發(fā)送請求獲取數(shù)據(jù)，保存數(shù)據(jù)列表及數(shù)據(jù)總數(shù)。例如發(fā)送一個搜索請求，參數(shù)：當(dāng)前頁數(shù)、每頁數(shù)量等等，獲取的數(shù)據(jù)中會包含數(shù)據(jù)總數(shù)，所以總頁數(shù)會自動計算，只需要確定每頁數(shù)量和數(shù)據(jù)總數(shù)就行。

到此這篇關(guān)于vue3 el-pagination 將組件中英文‘goto’ 修改為中文到‘第幾’的文章就介紹到這了,更多相關(guān)vue3 el-pagination英文改為中文內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: