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