vue管理后台项目表格分页搜索问题和element组件el-pagination的使用

<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="onSubmit">查询</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: {
    onSubmit() {
      // 模拟查询操作
      this.fetchData(this.searchForm.keyword);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData(this.searchForm.keyword);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData(this.searchForm.keyword);
    },
    fetchData(keyword) {
      // 模拟发起请求获取分页数据
      // 假设getTableData是一个API请求函数，它接受关键词和分页参数
      getTableData(keyword, this.currentPage, this.pageSize).then(response => {
        this.tableData = response.data.list;
        this.total = response.data.total;
      });
    }
  },
  created() {
    // 初始化加载第一页数据
    this.fetchData('');
  }
};
</script>

在这个代码实例中，我们使用了Element UI的<el-pagination>组件来实现表格的分页功能。在data函数中定义了分页相关的参数，并在methods中定义了处理分页变化的方法。在表单查询时，调用fetchData方法来获取服务器上的数据，并更新tableData和total。这个例子展示了如何在Vue.js项目中使用Element UI组件进行表格数据的分页展示和搜索。