element plus分页国际化+分页渲染

实现效果如下   vue3+ele plus+js

代码如下

<template>
      <el-table    :data="filterTableData "    </el-table>

     <el-config-provider :locale="locale">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[8]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </el-config-provider>
</template>

<script setup>
// 国际化切换
import zhCn from '../utils/lang/zh-cn.mjs'
import en from '../utils/en.mjs'
import ja from '../utils/ja.mjs'
const language = ref('zhCn')
const translations = reactive({
  zhCn: zhCn,
  en: en,
  ja: ja
})

const locale = computed(() => translations[language.value])


let filterTableData = reactive([])    // 表格的渲染数据列表



// 分页器部分
let paginatedData = reactive([])  
const total1 = ref(10)
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)


const handleSizeChange = val => {
  console.log(`${val} items per page`)
  pageSize.value = val 
  updatePaginatedData()
}

function handleCurrentChange (val) {
  console.log(`current page: ${val}`)
  currentPage.value = val
  updatePaginatedData()
}

function updatePaginatedData () {
  const start = (currentPage.value - 1) * pageSize.value
  // paginatedData = tableData.slice(start, start + pageSize.value) //直接赋值,会覆盖掉原来的响应式对象，导致Vue无法追踪到这个变化
  paginatedData.splice(
    0,
    paginatedData.length,
    ...tableData.slice(start, start + pageSize.value)
  )
}

// 从后台拿数据
async function fetchData () {
  try {
    await listDeploy().then(res => {
      tableData.length = 0 
      tableData.push(...res.data) 

      total1.value = tableData.length  //分页器的总数

      updatePaginatedData()  //更新分页器页面数据
 })
  } catch (error) {
    console.error('从后台拿现有模型列表失败', error)
  }
}

// 渲染到table中 , 用计算属性缓存了数据 , 也实现了搜索功能
const filterTableData = computed(function () {
  return paginatedData.filter(function (data) {
    return (
      !search.value ||
      data.container_name.toLowerCase().includes(search.value.toLowerCase())
    )
  })
})

国际化文件引入 , 项目npm i 引入了element plus以后 , 可以在这里找到国际化文件