el-form实现分页效果

要在 el-form 中实现分页效果，可以使用 el-pagination 组件和表单的提交事件结合起来，具体步骤如下：

1. 在 el-form 表单中添加 el-pagination 分页组件，并绑定当前页码和每页显示条数的变量。

<el-form>
  <!-- 其他表单项 -->
  <el-pagination
    v-model="currentPage"
    :page-size="pageSize"
    @current-change="handlePageChange"
    background
    layout="prev, pager, next"
    :total="total"
  />
</el-form>

2. 在 data 中定义 currentPage 和 pageSize 变量，并在 methods 中定义 handlePageChange 方法，该方法用于监听分页组件的页码变化事件，并重新获取数据。

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    formData: {
      // 表单数据
    },
    tableData: []
  }
},
methods: {
  handlePageChange(newPage) {
    // 更新当前页码
    this.currentPage = newPage;
    // 重新获取数据
    this.getData();
  },
  getData() {
    // 发送请求获取数据
    // ...
    // 更新表格数据和总记录数
    this.tableData = data.list;
    this.total = data.total;
  },
  submitForm() {
    // 提交表单时，重新获取第一页的数据
    this.currentPage = 1;
    this.getData();
  }
}

3. 在 el-form 的提交事件中，调用 getData 方法获取数据，并将 currentPage 和 pageSize 作为参数传递给后端接口，实现分页效果。

<el-form @submit.prevent="submitForm">
  <!-- 表单项 -->
  <el-button type="primary" native-type="submit">查询</el-button>
</el-form>

getData() {
  // 发送请求获取数据
  axios.get('/api/data', {
    params: {
      currentPage: this.currentPage,
      pageSize: this.pageSize,
      ...this.formData
    }
  }).then(res => {
    // 更新表格数据和总记录数
    this.tableData = res.data.list;
    this.total = res.data.total;
  }).catch(err => {
    console.log(err);
  });
},

这样，就可以在 el-form 表单中实现分页效果了。