antd vue table自带的分页怎么配合筛选条件使用

Question

antd vue table自带的分页怎么配合筛选条件使用

<template>
  <page-header-wrapper>
    <a-card :loading="loading" :bordered="false" :style="{ marginBottom: '24px' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="规则编号">
                <a-input v-model="queryParam.id" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-item label="调用次数">
                  <a-input-number v-model="queryParam.callNo" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="更新日期">
                  <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="使用状态">
                  <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="使用状态">
                  <a-select placeholder="请选择" v-model="queryParam.useStatus" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 6 || 6" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'left', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </div>
      <div class="table">
        <a-table :data-source="dataTable" bordered :pagination="pagination" size="small">
          <a-table-column key="lastName" title="Last Name" data-index="lastName" />
          <a-table-column key="age" title="Age" data-index="age" />
          <a-table-column key="address" title="Address" data-index="address" />
          <a-table-column key="tags" title="Tags" data-index="tags">
            <template slot-scope="tags">
              <span>
                <a-tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</a-tag>
              </span>
            </template>
          </a-table-column>
          <a-table-column key="action" title="Action">
            <template slot-scope="text, record">
              <span>
                <a @click="editRow(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="deleteRow(record)">删除</a>
              </span>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  export default {
    name: 'Querystock',
    data() {
      return {
        loading: false,
        // 查询参数
        queryParam: {},
        page: {
          pageSize: 10,
          current: 1
        },
        // 高级搜索 展开/关闭
        advanced: false,
        pagination: {
          defaultPageSize: 2,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条数据`,
          showSizeChanger: true,
          pageSizeOptions: ['2', '3', '5', '10'],
          onShowSizeChange: (current, pageSize) => { this.pageSize = pageSize },
          onChange: (current, pageSize) => this.changePage(current, pageSize),
          total: 0
        },
        dataTable: [{
            key: '1',
            firstName: 'John',
            lastName: 'Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer']
          },
          {
            key: '2',
            firstName: 'Jim',
            lastName: 'Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser']
          },
          {
            key: '3',
            firstName: 'Joe',
            lastName: 'Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher']
          },
          {
            key: '4',
            firstName: 'Joe',
            lastName: 'Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher']
          },
          {
            key: '5',
            firstName: 'Joe',
            lastName: 'Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher']
          },
          {
            key: '6',
            firstName: 'Joe',
            lastName: 'Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher']
          },
          {
            key: '7',
            firstName: 'Joe',
            lastName: 'Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher']
          }
        ]
      }
    },
    methods: {
      // 获取列表信息
      fetchList(params = {}) {
        console.log({ ...this.page, ...params })
      },
      // 搜索事件
      onSearch() {
        this.fetchList(this.queryParam)
      },
      // 新增操作
      handleAdd() {
        this.mdl = null
        this.visible = true
      },
      // 反选展开按钮
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      // 重置事件
      resetForm() {
        this.queryParam = {}
        this.page.current = 1
        this.page.pageSize = 10
        this.fetchList()
      },
      // 翻页事件
      changePage(page, pageSize) {
        this.page.current = page
        this.page.pageSize = pageSize
        this.fetchList({ ...this.queryParam })
      },
      deleteRow(row) {
        console.log(row)
      },
      editRow(row) {
        console.log(row)
      }
    }
  }
</script>

<style lang="less" scoped>
</style>

Answer 1

一般数据做筛选是用两个数据，一个是总数据，比如叫allData，一个是根据筛选条件过滤后的数据，比如叫tableData，这是表格渲染正真使用的数据，tableData可以在computend中利用allData和筛选条件过滤出来，同时这里还可以更新下分页数据，如页数等。

Answer 2

我做完表格数据请求后，如果在第一页，这时候做搜索什么问题都没有；
如果我把分页拖到最后一页，这时候去做搜索查询，会用刚才的分页信息（页数已经超了），查询不到结果；
如果在搜索时做分页重置，那每次搜索都重置。

以上是我遇到的问题，贴一下我的解决方法，关键看handleTableChange方法

• template中的页面结构：搜索和table，注意table的pagination和change的绑定

  <a-input-search v-model.trim="searchVal" @search="onSearch" />
  <a-table
      class="table"
      rowKey="id"
      :columns="columns"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :data-source="data"
      ></a-table>

• pagination的定义，我在data中有return，不贴了，searchVal也是

  const pagination = {
    total: 0,
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '20', '50', '100'],
    showTotal: (total) => `共${total}条`
  }

• onSearch和change方法

  onSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 10
      // 为空请求全部，不为空请求搜索
      this.searchVal === '' ? this.fetchAppList() : this.searchApp()
  },
  // 搜索
  searchApp () {
      const names = replace(this.searchVal, '，', ',')
      const params = {
      names
      }
      this.fetchAppList(params) //这是请求数据
  },
  // 表格变化
  handleTableChange ({ current, pageSize }) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      // 这里是关键，表格变化时直接去请求搜索，而不是触发onSearch事件
      this.searchVal === '' ? this.fetchAppList() : this.searchApp()
  }

更简单的办法，我这里searchApp多写了，直接在fetchAppList中处理查询参数。

• 贴一下事件

    onSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 10
      this.fetchAppList()
    },
    handleTableChange ({ current, pageSize }) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.fetchAppList()
    }

  总结一下，在onSearch中重置分页信息为初始化，在table的change中改变分页信息为当前值，在请求中处理查询参数