快捷導(dǎo)航

vue3分頁組件與中文化詳解

更新時(shí)間：2025年09月13日 09:42:12 作者：leijmdas

這篇文章主要介紹了vue3分頁組件與中文化的使用,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3分頁組件與中文化

這段代碼實(shí)現(xiàn)了一個(gè)基于Vue 3和Element Plus的分頁組件。

組件支持雙向綁定的當(dāng)前頁碼(currentPage)和每頁條數(shù)(pageSize)屬性，包含總條數(shù)(total)顯示和可選每頁條數(shù)設(shè)置，支持頁碼切換和每頁條數(shù)變化時(shí)觸發(fā)change事件。

通過el-config-provider配置中文語言環(huán)境，組件樣式采用flex布局右對齊。

父組件通過v-model綁定分頁參數(shù)，并在change事件中調(diào)用數(shù)據(jù)獲取方法。

import zhCn from "element-plus/es/locale/lang/zh-cn"
import {ref} from 'vue'
const locale = ref(zhCn)
<template>
  <div class="table-footer">
<el-config-provider :locale="locale">

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleChange"
      @current-change="handleChange"
    />
</el-config-provider>

  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    /* 當(dāng)前頁，支持 v-model:page */
    currentPage: { type: Number, default: 1 },
    /* 每頁條數(shù)，支持 v-model:limit */
    pageSize: { type: Number, default: 10 },
    /* 總條數(shù) */
    total: { type: Number, default: 0 },
    /* 可選每頁條數(shù) */
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    }
  },
  emits: ['update:currentPage', 'update:pageSize', 'change'],
  computed: {
    currentPage: {
      get()  { return this.currentPage },
      set(v) { this.$emit('update:currentPage', v) }
    },
    pageSize: {
      get()  { return this.pageSize },
      set(v) { this.$emit('update:pageSize', v) }
    }
  },
  methods: {
    handleChange() {
      /* 對外暴露一個(gè) change 事件，參數(shù)：{ page, limit } */
      this.$emit('change', { currentPage: this.currentPage, pageSize: this.pageSize })
    }
  }
}
</script>

<style scoped>
.table-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}


</style>
<script setup>

import Pagination from '@/components/Pagination.vue'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 統(tǒng)一獲取數(shù)據(jù)
function getData() {
  // 這里調(diào)用接口 list
  console.log('拉取第', currentPage.value, '頁', pageSize.value, '條')
}
</script>

<template>
<div>
   <Pagination
      v-model:currentPage="currentPage"
      v-model:pageSize="pageSize"
      :total="total"
      @change="getData"
    />
  </div>
</template>

這個(gè)代碼是一個(gè) Vue 3 的組合式函數(shù) (Composable Function)，它封裝了一些常用的全局方法和狀態(tài)管理邏輯。

我來分析并優(yōu)化這段代碼：

代碼分析

功能：

獲取全局屬性 ($message, $messageBox, $dict, $api)
提供全局狀態(tài)管理 (Pinia store)
封裝了常用方法 (確認(rèn)對話框、日志等)
提供了分頁和表格相關(guān)的響應(yīng)式狀態(tài)

優(yōu)點(diǎn)：

使用組合式API封裝可復(fù)用邏輯
集中管理常用工具方法
提供了表格和分頁的通用狀態(tài)

可改進(jìn)點(diǎn)：

類型安全(TypeScript)
錯(cuò)誤處理
代碼組織
響應(yīng)式狀態(tài)初始化

優(yōu)化建議 (TypeScript 版本)

import { reactive, ref, getCurrentInstance, ComponentInternalInstance } from 'vue'
import { useGlobalStore } from "../store"
import type { MessageBox, Message, DictType, ApiType } from '../types' // 假設(shè)有這些類型定義

interface PageParams {
  currentPage: number
  pageSize: number
  total: number
}

interface TableData<T = any> {
  list: T[]
}

interface UserInfo {
  // 定義用戶信息結(jié)構(gòu)
  [key: string]: any
}

export default function useGlobalUtils() {
  const instance = getCurrentInstance()!
  const globalProp = instance.appContext.config.globalProperties
  const globalStore = useGlobalStore()
  
  // 類型化全局工具
  const getMessage = (): Message => globalProp.$message
  const getMessageBox = (): MessageBox => globalProp.$messageBox
  const getDict = (): DictType => globalProp.$dict
  const getApi = (): ApiType => globalProp.$api
  
  // 用戶信息（帶錯(cuò)誤處理）
  const getUserInfo = (): UserInfo => {
    try {
      return JSON.parse(localStorage.userInfo || '{}')
    } catch (e) {
      console.error('解析用戶信息失敗:', e)
      return {}
    }
  }

  // 確認(rèn)對話框
  const confirm = async (prompt = "確認(rèn)提交此次編輯嗎?"): Promise<boolean> => {
    try {
      const isConfirm = await getMessageBox().confirm(prompt, "提示", {
        confirmButtonText: "確認(rèn)",
        cancelButtonText: "取消",
        type: "warning",
      })
      if (isConfirm) {
        console.log("操作已確認(rèn)")
      }
      return isConfirm
    } catch (error) {
      console.error('確認(rèn)對話框錯(cuò)誤:', error)
      return false
    }
  }

  // 分頁狀態(tài)
  const page = reactive<PageParams>({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  // 表格狀態(tài)
  const tableState = reactive({
    data: {
      list: []
    } as TableData,
    loading: false,
    itemData: {} as any,
    dialogLoading: false
  })

  // 日志方法
  const log = (...args: any[]) => {
    if (process.env.NODE_ENV !== 'production') {
      console.log(...args)
    }
  }

  return {
    globalStore,
    getApi,
    getMessage,
    getMessageBox,
    getDict,
    confirm,
    log,
    userInfo: getUserInfo(),
    page,
    ...tableState,
    // 或者分開暴露
    // tableData: tableState.data,
    // tableLoading: tableState.loading,
    // itemData: tableState.itemData,
    // dialogLoading: tableState.dialogLoading
  }
}

主要改進(jìn)點(diǎn)

類型安全：

添加了TypeScript類型定義
為全局工具方法添加了返回類型

錯(cuò)誤處理：

添加了JSON解析的錯(cuò)誤處理
確認(rèn)對話框添加了try-catch

代碼組織：

將表格相關(guān)狀態(tài)合并到一個(gè)reactive對象中
使用更清晰的命名

其他改進(jìn)：

生產(chǎn)環(huán)境日志控制
更合理的函數(shù)命名
更好的代碼注釋

使用建議

在組件中使用：

<script setup lang="ts">
const {
  page,
  tableData,
  confirm,
  getApi
} = useGlobalUtils()

// 使用示例
const handleDelete = async () => {
  if (await confirm('確定刪除此項(xiàng)嗎?')) {
    // 執(zhí)行刪除操作
  }
}
</script>

建議將這些工具函數(shù)按功能拆分到不同的文件中，例如：

useGlobalTools.ts (全局工具)
useTableState.ts (表格狀態(tài))
usePagination.ts (分頁邏輯)

考慮將用戶信息也使用Pinia管理，而不是直接從localStorage讀取

這樣的優(yōu)化將使代碼更健壯、更易維護(hù)，并且在使用TypeScript時(shí)能獲得更好的類型提示和錯(cuò)誤檢查。

JavaScript 版本的重寫

以下是使用純 JavaScript 重寫的代碼，保持了原有功能并進(jìn)行了優(yōu)化：

import { reactive, ref, getCurrentInstance } from 'vue'
import { useGlobalStore } from "../store"

export default function useGlobalUtils() {
  const instance = getCurrentInstance()
  const globalProp = instance.appContext.config.globalProperties
  const globalStore = useGlobalStore()
  
  // 獲取全局工具方法
  const getMessage = () => globalProp.$message
  const getMessageBox = () => globalProp.$messageBox
  const getDict = () => globalProp.$dict
  const getApi = () => globalProp.$api
  
  // 安全獲取用戶信息
  const getUserInfo = () => {
    try {
      return JSON.parse(localStorage.userInfo || '{}')
    } catch (e) {
      console.error('解析用戶信息失敗:', e)
      return {}
    }
  }

  // 確認(rèn)對話框封裝
  const confirm = async (prompt = "確認(rèn)提交此次編輯嗎?") => {
    try {
      const isConfirm = await getMessageBox().confirm(prompt, "提示", {
        confirmButtonText: "確認(rèn)",
        cancelButtonText: "取消",
        type: "warning",
      })
      if (isConfirm) {
        console.log("操作已確認(rèn)")
      }
      return isConfirm
    } catch (error) {
      console.error('確認(rèn)對話框錯(cuò)誤:', error)
      return false
    }
  }

  // 分頁狀態(tài)
  const page = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  // 表格相關(guān)狀態(tài)
  const tableState = reactive({
    data: { list: [] },
    loading: false,
    itemData: {},
    dialogLoading: false
  })

  // 開發(fā)環(huán)境日志
  const log = (...args) => {
    if (process.env.NODE_ENV !== 'production') {
      console.log(...args)
    }
  }

  return {
    // 全局工具
    globalStore,
    getApi,
    getMessage,
    getMessageBox,
    getDict,
    
    // 方法
    confirm,
    log,
    
    // 狀態(tài)
    userInfo: getUserInfo(),
    page,
    
    // 表格狀態(tài) (可展開或直接暴露)
    tableData: tableState.data,
    tableLoading: tableState.loading,
    itemData: tableState.itemData,
    dialogLoading: tableState.dialogLoading,
    
    // 也可以這樣暴露
    // ...tableState
  }
}

使用示例

// 在組件中使用
import useGlobalUtils from './useGlobalUtils'

export default {
  setup() {
    const {
      page,
      tableData,
      confirm,
      getApi,
      log
    } = useGlobalUtils()

    // 獲取數(shù)據(jù)示例
    const fetchData = async () => {
      try {
        tableData.loading = true
        const response = await getApi().get('/data', {
          params: {
            page: page.currentPage,
            size: page.pageSize
          }
        })
        tableData.list = response.data.list
        page.total = response.data.total
      } catch (error) {
        log('獲取數(shù)據(jù)失敗:', error)
        getMessage().error('獲取數(shù)據(jù)失敗')
      } finally {
        tableData.loading = false
      }
    }

    // 刪除確認(rèn)示例
    const handleDelete = async (id) => {
      if (await confirm('確定刪除此項(xiàng)嗎?')) {
        try {
          await getApi().delete(`/data/${id}`)
          getMessage().success('刪除成功')
          fetchData() // 刷新數(shù)據(jù)
        } catch (error) {
          log('刪除失敗:', error)
          getMessage().error('刪除失敗')
        }
      }
    }

    return {
      page,
      tableData,
      handleDelete,
      fetchData
    }
  }
}