代码如下：
# 查询条件
<a-form layout="inline">
<a-row :gutter="48">
<template v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item label="id">
<a-input v-model="queryParam.id" allow-clear style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="日期">
<a-range-picker v-model="queryParam.updateTime" showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" placeholder="请输入日期"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="类型">
<a-select v-model="queryParam.do" placeholder="请选择" default-value="0">
<a-select-option value="">全部</a-select-option>
<a-select-option value="0">是</a-select-option>
<a-select-option value="1">否</a-select-option>
</a-select>
</a-form-item>
</a-col>
</template>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && {
float: 'right', overflow: 'hidden' } || {
} ">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
</span>
</a-col>
</a-row>
</a-form>
<template>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
>
</s-table>
</template>
<script>
import {
STable } from '@/components'
# 分装的方法
import {
getUserList } from '@/api/user'
export default {
components: {
STable
},
data() {
return {
columns: [
{
title: 'id',
align: 'center',
dataIndex: 'id'
},
{
title: '名称',
align: 'center',
dataIndex: 'name'
},
{
title: '状态',
align: 'center',
dataIndex: 'status',
},
{
title: '更新时间',
align: 'center',
dataIndex: 'updateTime',
sorter: true
}
],
// 查询条件参数
queryParam: {
},
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
const requestParameters = Object.assign({
}, parameter, this.queryParam)
return getUserList(requestParameters)
.then(res => {
console.log(res)
return res.data
})
}
}
}
}
</script>
介绍
- s-table 和 官网的 a-table相比，目前发现，就是不用处理分页，只要后端返回相应参数即可。
- 查询，只要确保 queryParam的属性和columns中对应的字段一致即可。
- 排序，s-table 表单的排序，会向后端传输两个参数，sortField与sortOrder。sortField代表排序的字段，sortOrder代表是升序还是降序，如下是升序。分页传的参数为 pageNo和pagesize。 如下：
- 后台传回来的参数格式，包括四个分页需要用到的参数，如下：
