ElementUI实现分页和后端搜索

后端接口

后端接收参数：

• search 搜索

• page 页码

• limit 分页数量

前端实现

<!-- 搜索框-->
    <template #header>
      <el-input v-model="search" size="small" placeholder="搜索" @blur="handleSearch"/>
    </template>
......
<!-- 分页器-->
    <div class="example-pagination-block">
      <el-pagination
          v-model="currentPage"
          :total="total"
          :page-size="pageSize"
          :small="true"
          :background="true"
          layout="->,prev, pager, next,total,jumper"
          @current-change="handlePageChange"
      />
    </div>

const search = ref("")      // 搜索表单
const total = ref(0)        // 总数据量
const pageSize = ref(10)    // 每页数据量
const currentPage = ref(1)  // 当前页码

// 切换页码时刷新页码并重载数据
function handlePageChange(current) {
  currentPage.value = current;
  initRequest()
}


function handleSearch() {
  // 携带关键字参数向后端发送搜索请求
  proxy.$axios.get(`v1/site/?page=${currentPage.value}&limit=${pageSize.value}&search=${search.value}`)
      .then((res) => {
        state.sites = res.data.results;
        total.value = res.data.count;
      })
}

const initRequest = async () => {
  try {
    const [sitesRes, categoryRes] = await Promise.all([
      proxy.$axios.get(`v1/site/?page=${currentPage.value}&limit=${pageSize.value}`),
      proxy.$axios.get('v1/site_category/'),
    ])
    state.sites = sitesRes.data.results
    total.value = sitesRes.data.count
    state.category = categoryRes.data.results
  } catch (error) {
    console.error('Error:', error)
  }
}

分页

• 初始化总数据量和当前页码，预设分页数量为10条

• 将上述参数分别绑定到element分页器，当页码改变时触发handlePageChange

• initRequest携带预设页码和分页数量向后端请求数据

• state接收返回结果展示数据，total获取返回总数，分页器根据返回总数进行分页展示

• 当切换页码时，handlePageChange将新页码重新赋值给currentPage，并重新向后端发送请求，实现数据刷新

搜索

• 绑定input model到search，当失去焦点时触发handleSearch

• handleSearch携带search内容向后端发送请求，state接收返回值实现数据刷新