antd vue table自带的分页怎么配合筛选条件使用
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>
回答：
一般数据做筛选是用两个数据，一个是总数据，比如叫allData，一个是根据筛选条件过滤后的数据，比如叫tableData，这是表格渲染正真使用的数据，tableData可以在computend中利用allData和筛选条件过滤出来，同时这里还可以更新下分页数据，如页数等。
回答：
我做完表格数据请求后，如果在第一页，这时候做搜索什么问题都没有；
如果我把分页拖到最后一页，这时候去做搜索查询，会用刚才的分页信息（页数已经超了），查询不到结果；
如果在搜索时做分页重置，那每次搜索都重置。
以上是我遇到的问题，贴一下我的解决方法，关键看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中改变分页信息为当前值，在请求中处理查询参数
以上是 antd vue table自带的分页怎么配合筛选条件使用 的全部内容， 来源链接： utcz.com/p/935571.html
