Element UI 分页和条件查询示例代码

<template>
  <div>
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="searchForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
<pre><code>&lt;el-table :data=&quot;tableData&quot; border&gt;
  &lt;el-table-column prop=&quot;name&quot; label=&quot;姓名&quot;&gt;&lt;/el-table-column&gt;
  &lt;el-table-column prop=&quot;age&quot; label=&quot;年龄&quot;&gt;&lt;/el-table-column&gt;
&lt;/el-table&gt;

&lt;el-pagination
  :current-page=&quot;currentPage&quot;
  :page-size=&quot;pageSize&quot;
  :total=&quot;total&quot;
  @current-change=&quot;handlePageChange&quot;
  layout=&quot;total, prev, pager, next, jumper&quot;
&gt;&lt;/el-pagination&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {
        name: '',
        age: null,
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  methods: {
    handleSearch() {
      // 发送请求获取数据
      this.fetchTableData()
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.fetchTableData()
    },
    fetchTableData() {
      // 发送请求获取数据
      // 并更新 tableData 和 total
    },
  },
}
</script>
<p>在上面的代码中，我们定义了一个带条件查询和分页的表格。搜索条件包括姓名和年龄，分页使用了 element-ui 的分页组件。在 <code>handleSearch</code> 方法中，我们发送请求并更新表格数据，同时重置当前页为第一页。在 <code>handlePageChange</code> 方法中，我们更新当前页并重新获取数据。<code>fetchTableData</code> 方法是获取数据的实际方法，我们可以在其中发送请求，获取数据，并更新 <code>tableData</code> 和 <code>total</code> 属性。</p>
<p>需要注意的是，我们在 <code>v-model</code> 中使用了 <code>v-model.number</code>，这是因为我们的年龄是一个数字类型，而 <code>v-model</code> 默认会将输入的内容转为字符串类型，使用 <code>v-model.number</code> 可以将其转为数字类型。</p>