Vue + Element UI Table + TypeScript + 前端分页 + 前端模糊查询

fe_pagination_search.vue

<template lang='pug'>
  .wrapper
    el-input(
      placeholder='请输入检索条件'
      prefix-icon='el-icon-search',
      v-model='searchValue',
    )
    el-table(
      :data='tables.slice((curPage - 1) * curPageSize, curPage * curPageSize)',
      stripe,
      v-loading='loading',
      style='width: 100%')
      el-table-column(
        prop='name'
        label='名称')
      el-table-column(
        prop='description'
        label='描述')
      el-table-column(
        prop='updateTime'
        label='更新时间')
    .pagination-container
      el-pagination(
        @size-change='handleSizeChange',
        @current-change='handleCurrentChange',
        :current-page='curPage',
        :page-sizes='[10, 25, 50 ,100]',
        :page-size='curPageSize',
        layout='total, sizes, prev, pager, next',
        :total='total'
      )
</template>
<script lang='ts'>
import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
import { getData } from '@/api/api';
import { ITable } from '@/types/types';

@Component
export default class FEPaginationSearch extends Vue {

  public dataSource: ITable[] = [];

  public curPage = 1;

  public curPageSize = 10;

  public loading = false;

  public searchValue = '';

  public mounted() {
    this.getData();
  }

  public handleSizeChange(val: number) {
    this.curPageSize = val;
  }

  public handleCurrentChange(val: number) {
    this.curPage = val;
  }

  get tables() {
      return this.dataSource.filter(
        (data: any) =>
          !this.searchValue ||
          data.name.toLowerCase().includes(this.searchValue.toLowerCase()), // 根据数据源的某个字段排序，这里是根据 name 排序
      );
  }

  get total() {
    return this.tables.length;
  }

  @Watch('tables')
  public onTablesChange() {
    this.curPage = 1;
  }

  public async getData() {
    this.loading = true;
    try {
      const res = await getData();
      if (res.data.data) {
        this.dataSource = res.data.data;
      }
    } catch (error) {
      alert(error);
    } finally {
      this.loading = false;
    }
  }
}
</script>
<style lang='less' scope>
.wrapper {
  .el-input {
    width: 500px;
  }
}
</style>