ElementUI-Table分页查询

 <!-- 搜索 -->
<el-input
          placeholder="请输入商品名搜索"
          v-model="searchText"
          class="input-with-select"
          style="width: 300px !important; float: right"
          >
</el-input>

<el-table
      v-loading="listLoading"
      :data="
        list
          .filter(
            (data) =>
              !searchText ||
              data.goodsName.toLowerCase().includes(searchText.toLowerCase())
          )
          .slice(
            (tablePage.currentPage - 1) * tablePage.pageSize,
            tablePage.currentPage * tablePage.pageSize
          )
      "
      element-loading-text="Loading"
      fit
      highlight-current-row
      :default-sort="{prop:'categoryName',order:'descending'}"
>
</el-table>
<!-- 分页 -->
<el-pagination
     :current-page="tablePage.pageNum"
     background
     align="center"
     layout="prev, pager, next"
     @current-change="handleCurrentChange"
     :page-size="tablePage.pageSize"
     :total="this.tablePage.total"
>
</el-pagination>

<script>
export default {
  data() {
    return {
      tablePage: {
        currentPage: 1, // 第几页
        pageSize: 6, // 每页多少条
        total: 0, // 总记录数
      },
      searchText: "", //输入框
    }
  }
}
</script>

• 这里直接使用ElementUI的Table组件
• 利用filter进行过滤查询相关集合
• 利用slice进行分页