<template>
<div>
<div id="components-form-demo-advanced-search">
<a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSearch" :headers="headers">
<a-row :gutter="24">
<a-col
v-for="v,i in headers"
:key="i"
:span="8"
:style="{ display: i < count ? 'block' : 'none' }"
>
<a-form-item :label="`${v}`" >
<a-input
v-decorator="[
`${v}`,
{
rules: [
{
required: false,
message: 'Input something!',
},
],
initialValue: ''
},
]"
placeholder="placeholder"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24" :style="{ textAlign: 'right' }">
<a-button type="primary" html-type="submit">
查询
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
清除
</a-button>
<a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
收起 <a-icon :type="expand ? 'up' : 'down'" />
</a>
</a-col>
</a-row>
</a-form>
</div>
<div><modalbox></modalbox></div>
<div>
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1300,y:1500}" class="tb_list" ref="table"
:pagination="pagination"
:row-selection="rowSelection"
:rowKey="record=>record.id"
:loading="loading"
@change="handleTableChange"
>
<span slot="action" slot-scope="text, record" class="sup">
<a-button type="link" @click="showModal(record)" style="color:green">Edit</a-button>
<a-popconfirm
placement="bottomRight"
title="Are you sure delete it?"
ok-text="Yes"
cancel-text="No"
@confirm="confirm"
@cancel="cancel"
>
<a href="#" style="color:red">Delete</a>
</a-popconfirm>
</span>
</a-table>
<div>
<a-modal v-model="visible" title="Basic Modal" @ok="handleOk" class="edit-mask">
<a-form name="edit_form" :form="formedit" id="editform">
<a-form-model-item label="name" id="name-item">
<a-input placeholder="input placeholder"
v-decorator="[
'name',
{ rules: [{ required: true, message: 'Please input your name!' }],initvalue:{} },
]"
/>
</a-form-model-item>
<a-form-model-item label="age" id="age-item">
<a-input placeholder="input placeholder"
v-decorator="[
'age',
{ rules: [{ required: true, message: 'Please input your age!' }],initvalue:{} },
]"
/>
</a-form-model-item>
<a-form-model-item label="address" id="address-item">
<a-input placeholder="input placeholder"
v-decorator="[
'address',
{ rules: [{ required: true, message: 'Please input your address!' }],initvalue:{} },
]"
/>
</a-form-model-item>
</a-form>
</a-modal>
</div>
</div>
</div>
</template>
<script>
import _ from 'lodash';
import FormSearch from '@/components/FormSearch.vue'
import modalbox from '@/components/AddModal.vue'
const columns = [
{ title: 'id', dataIndex: 'id', key: 'id', width: 150},
{ title: 'address', dataIndex: 'address', key: 'address' ,width: 150},
{ title: 'age', dataIndex: 'age', key: 'age',width: 150 },
{ title: 'name', dataIndex: 'name', key: 'name',width: 150 ,
},
{title: 'operate',key: 'operation',fixed: 'right', width:'auto',scopedSlots: { customRender: 'action' },
},
];
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
};
export default {
name:'tablelist',
computed: {
count() {
return this.expand ? 4 : 3;
},
},
data() {
return {
loading: false,
formedit: this.$form.createForm(this, { name: 'edit_form' }),
form: this.$form.createForm(this, { name: 'advanced_search' }),
expand: false,
headers:["versionNo","name","age"],
visible:false,
data:[],
queryInfo:{
page_size:10,
page:1
},
columns,
rowSelection,
pagination:{
defaultPageSize:10,
defaultCurrent:1,
total:20,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger:true,
pageSizeOptions: [ '10', '20', '30','50'],
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
}
};
},
created () {
this.getUserList()
},
methods: {
// getUserList when enter table Page
getUserList(){
this.$axios({
url: '/demo-service/api/v1/vue/',
method: 'get',
params: this.queryInfo
}).then(res => {
const pagination = { ...this.pagination };
// Read total count from server
// pagination.total = data.totalCount;
pagination.total =res.data.data.totals ;
this.loading = false;
this.data = res.data.data.data;
this.pagination = pagination;
});
},
//
handleTableChange(pagination, filters, sorter) {
console.log(pagination);
const pager = { ...this.pagination };
pager.current = pagination.current;
this.pagination = pager;
this.fetch({
pageSize: pagination.pageSize,
page: pagination.current,
});
},
fetch(params = {}) {
console.log('params:', params);
this.loading = true;
this.$axios({
url:'/demo-service/api/v1/vue/',
method: 'get',
params: {...params},
}).then(res => {
const pagination = { ...this.pagination };
// Read total count from server
// pagination.total = data.totalCount;
pagination.total =res.data.data.totals ;
this.loading = false;
this.data = res.data.data.data;
this.pagination = pagination;
});
},
// query table
handleSearch(e) {
e.preventDefault();
this.form.validateFields((error, values) => {
this.loading = true;
this.$axios(
{
url: '/demo-service/api/v1/vue/',
method: 'get',
params:
values
,
}
) .then( (response)=> {
console.log(response.data.data);
this.data=response.data.data.data
this.pagination.total=response.data.data.totals
}
).catch(function (error) {
console.log(error);});
});
},
// reset form search
handleReset() {
this.form.resetFields();
},
// expand control
toggle() {
this.expand = !this.expand;
},
// excute axios delete call
confirm(e) {
this.$message.success('Click on Yes');
},
//do nothing
cancel(e) {
this.$message.error('Click on No');
},
showModal(record) {
this.visible = true;
// console.log(record.id+" "+record.name+" ",record.age+""+record.address+"xxxxxxxxxxxxxxx");
// console.log(this.$route);
// 读取list接口数据赋值给编辑页面
this.$nextTick(()=>{
this.formedit.setFieldsValue({name:record.name,age:record.age,address:record.address})
});
},
handleOk(e) {
// 读取修改后表单
this.$nextTick(()=>{
let v= this.formedit.getFieldsValue()
console.log("获取修改后数据：\n")
console.log(v);
});
this.visible = false;
},
},
components:{'formsearch':FormSearch,modalbox},
};
</script>
<style lang="less" scoped>
.sup{
margin-left: -13px;
}
</style>
服务端自定义分页器：
from rest_framework.response import Response
class ListPagination(pagination.PageNumberPagination):
""""user custom pagination class"""
page_size_query_param = "page_size"
page_query_param = 'page'
page_size = 10
max_page_size = 100
def get_paginated_response(self, data):
"""
重写分页response方法，参考原PageNumberPagination class
"""
return Response({
'next': self.get_next_link(),
'previous': self.get_previous_link(),
'data': data,
'page_size': self.page.paginator.per_page,
'page': self.page.start_index() // self.page.paginator.per_page + 1,
'totals': self.page.paginator.count,
})
服务端数据返回结构：
{
"data": {
"next": null,
"previous": null,
"data": [
{
"id": 1,
"name": "张三",
"age": 11,
"address": "深圳"
},
{
"id": 2,
"name": "tomas",
"age": 10,
"address": "深圳111"
},
{
"id": 3,
"name": "tomas22",
"age": 10,
"address": "深圳22"
},
{
"id": 4,
"name": "adny",
"age": 33,
"address": "深圳33"
},
{
"id": 5,
"name": "ailsi",
"age": 33,
"address": "深圳33"
},
{
"id": 6,
"name": "lisa",
"age": 33,
"address": "深圳33"
},
{
"id": 7,
"name": "xuyan",
"age": 33,
"address": "深圳33"
},
{
"id": 8,
"name": "yukio",
"age": 33,
"address": "深圳33"
},
{
"id": 9,
"name": "toby",
"age": 33,
"address": "深圳33"
},
{
"id": 10,
"name": "陈权",
"age": 33,
"address": "前海信利康大厦111222222222222222222223"
},
{
"id": 11,
"name": "陈权3",
"age": 33,
"address": "前海信利康大厦111222222222222222222223"
},
{
"id": 12,
"name": "陈权4",
"age": 33,
"address": "前海信利康大厦111222222222222222222223"
},
{
"id": 13,
"name": "siba1",
"age": 33,
"address": "前海信利康大厦111222222222222222222223"
},
{
"id": 14,
"name": "sibuuu1",
"age": 33,
"address": "前海信利康大厦111222222222222222222223"
}
],
"page_size": 20,
"page": 1,
"totals": 14
},
"msg": "ok",
"code": 200,
"success": true
}
