vue3 element-plus表格分页 示例

可以的，以下是一个使用 Vue3 和 Element Plus 实现表格分页的示例：

<template>
  <div class="table-container">
    <el-table :data="tableData" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-pagination :page-size="pageSize" :total="total" :current-page.sync="currentPage"></el-pagination>
  </div>
</template>

<script>
import { ref } from 'vue'
import { getTableData } from '@/api/table'

export default {
  setup() {
    const tableData = ref([])
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

    const fetchData = async () => {
      const { data } = await getTableData(currentPage.value, pageSize.value)
      tableData.value = data.list
      total.value = data.total
    }

    const handleCurrentChange = (page) => {
      currentPage.value = page
      fetchData()
    }

    fetchData()

    return {
      tableData,
      currentPage,
      pageSize,
      total,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.table-container {
  margin: 20px;
}
</style>

这个示例使用了 `el-table` 和 `el-pagination` 组件来实现表格和分页功能。我们通过 `ref` 创建了响应式变量 `tableData`、`currentPage`、`pageSize` 和 `total`。在 `setup` 函数中，我们定义了一个 `fetchData` 函数来获取表格数据，然后在组件初始化时调用该函数。我们还定义了一个 `handleCurrentChange` 函数来处理分页组件的页码变化事件。在模板中，我们使用了这些变量和函数来渲染表格和分页组件。