前端学习——vue + elementui实现分页查询

在Vue中结合Element UI实现分页查询的基本步骤如下：

1. 安装并引入Element UI。
2. 在Vue组件中引入el-pagination组件。
3. 定义分页数据和查询方法。
4. 绑定分页数据到el-pagination组件的属性。
5. 实现分页查询方法，并在方法中更新分页数据。

以下是一个简单的示例代码：

<template>
  <div>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="关键词">
        <el-input v-model="searchForm.keyword" placeholder="请输入关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
 
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>
 
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchForm: {
        keyword: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    onSearch() {
      // 模拟分页查询方法
      this.fetchData(this.currentPage, this.pageSize, this.searchForm.keyword);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.onSearch();
    },
    fetchData(page, size, keyword) {
      // 这里应该是发起网络请求，获取分页数据
      // 模拟数据响应
      const start = (page - 1) * size;
      this.tableData = Array.from({ length: size }, (_, i) => ({
        id: start + i,
        name: `Name ${start + i}`,
        // 其他字段...
      }));
      this.total = 100; // 假设总数据量为100
    }
  },
  created() {
    this.onSearch(); // 创建时自动查询第一页数据
  }
};
</script>

在这个示例中，我们定义了一个简单的查询表单，并使用el-pagination组件来控制分页。在fetchData方法中，我们模拟了从服务器获取分页数据的过程。在实际应用中，这里应该替换为真实的网络请求，以从服务器获取实际数据。