>
</a-table>
其中：columns表⽰的是表头：
const columns = [
{
title: '姓名',
key: 'name ',
dataIndex: 'name',-------需要和后台返回的数据同名
align: 'center',
width: '30%'----宽度，可以指定也可以直接为数值
},
{
title: '电话',
key: 'phone',
dataIndex: 'phone',
align: 'center',
width: '30%'
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' },--------后台返回的对象，数组，或者删除编辑操作，不便直接展⽰-------此处即表⽰渲染action插槽
antdesignvue 配置外部文件align: 'center',
width: '30%'
}
]
dataSource：表⽰返回的数据，将后台返回的数据赋值即可
pagination：设置当前的currentPage(当前页码),pageSize（每页数据条数）,total（数据总条数）下⾯是pagination的写法，可以在请求数据的时候，传⼊相应的值同时为total赋值
pagination: {
pageSize: 6,
current: 1,
total: 0
},
pageChange：翻页，再次调⽤查询接⼝，传⼊相应页码，页⾯数据条数即可
pageChange(pagination) {
this.pagination = pagination
this.select()
}
loading是加载动画。当数据未显⽰的时候可以使⽤loading为true，待获取到数据，改为false即可
插槽使⽤：
1<div slot="action" slot-scope="text, record">----------record即每条数据，相当于v-for中定义的item，如有编辑操作，则根据需要传递值
2<template>
3<a @click="Delete(record)" >删除</a>
4</template>
5</div>
<span slot="address" slot-scope="text,record">
{{record.time}}
<br />
{{record.address}}
</span>
第⼀次使⽤这个框架，部分解决⽅法不够简便，只在于能够实现功能，如有⾼⼿。欢迎指正
豫公网安备41160202000602
发表评论