vue和elementui的分页表格数据

要实现基于 Vue 和 ElementUI 的分页表格数据，你可以按照以下步骤进行操作：

1. 安装 Vue 和 ElementUI：

npm install vue element-ui --save

2. 在你的代码中引入 Vue 和 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建一个分页表格组件（例如 PageTable.vue），并在其中定义表格数据、分页信息和分页处理函数：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      style="margin-top: 20px"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      // 发送请求获取表格数据
      // 并更新 this.tableData 和 this.total
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

4. 在父组件中引入并使用 PageTable 组件：

<template>
  <div>
    <page-table></page-table>
  </div>
</template>

<script>
import PageTable from './PageTable.vue'

export default {
  components: {
    PageTable
  }
}
</script>

在这个示例中，我们使用了 ElementUI 的 el-table 和 el-pagination 组件来实现分页表格数据的显示和分页处理。在分页表格组件中，我们定义了表格数据（tableData）、当前页码（currentPage）、每页显示条数（pageSize）和总条数（total），并在 fetchData 方法中发送请求获取数据并更新这些属性。我们还定义了 handleCurrentChange 方法来响应分页组件的页码改变事件，并在其中更新 currentPage 并调用 fetchData 方法获取新的数据。