利用Element-UI打造吸睛分页效果，惊艳你的网页设计

2024-01-02 02:12:30

在 Vue 项目中轻松实现分页效果：Element-UI 分页指南

**子
在 Vue 项目中使用 Element-UI 进行分页非常简单。首先，我们需要将 Element-UI 集成到我们的项目中。我们可以使用 CDN 或包管理器（如 npm）来安装 Element-UI。

代码示例：使用 CDN

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

代码示例：使用 npm

npm install element-ui

**子
接下来，我们需要创建一个 Vue 组件来处理分页。这个组件可以根据我们的需要进行定制，但这里是一个简单的示例：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

代码说明：

currentPage：当前页码。
pageSize：每页显示的数据条数。
total：数据总条数。
handleCurrentChange：当用户点击分页组件时调用的方法。

**子
现在，我们已经创建了分页组件，就可以在我们的 Vue 项目中使用了。这里是如何在一个简单的表格中使用分页组件的示例：

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

<script>
import { ref } from 'vue'
import Pagination from './Pagination.vue'

export default {
  components: { Pagination },
  setup() {
    const tableData = ref([
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      { name: '王五', age: 30 }
    ])
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(100)

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

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