本来想写个详解的，一翻API，算了吧ε=(´ο｀*)))，写个入门教程吧。
简单使用
<a-table
:columns="columns"
:data-source="data"
></a-table>
data(){
return{
columns: [...], //标题行数据
data: [] //一般为空，通过axios请求更新
}
}
这样写，a-table就能简单地把数据原样渲染上去，这里有两个参数介绍一下：
-
columns: 表头标题
columns: [
{
title: 'Name', //标题名字
dataIndex: 'name', //将渲染data-source里，name字段对应的数据
sorter: true, //可选 本地排序使用函数，使用服务端排序设置为true
width: '20%' //可选 该列宽度，不设置默认为自适应
},
...
]
-
data: 渲染数据源
就是要渲染的数据，数组内，一个对象对应一行数据
data: [
{ name: '安博', id: '12', nickname: '小安', ... },
{...}
]
其他常用参数
-
bordered: 是否显示边框 boolean -
loading: 加载中，是否显示加载动画 boolean | object -
title: 表格标题 -
row-key: 每行的key值，用作区分每行的，如果数据源有id字段，可：
:row-key='record => record.id' //后面会讲，record就是数据源里对应的该行的数据，是一个对象
-
pagination: 分页的设置 object
<a-table :pagination='pagination'></a-table>
data(){
return{
pagination: {
disabled: false, //禁用分页
hideOnSinglePage: true, //只有一页时是否隐藏分页器
pageSize: 10, //每页条数，所有页设置统一的条数
pageSizeOptions: ['10', '20', '30'], //每页显示的条数，每页设置不同的条数
total: 100, //数据总数
}
}
}
自定义列
有时候只是把数据渲染上去还不能满足要求，比如要显示性别，后端传过来的数据格式是：sex: true, true代表男，false代表女，总不能把true，false渲染上去吧。
这时候就要自定义了，a-table的自定义使用了插槽的概念：
columns: [
{ title: '名称', dataIndex: 'name', key: 'name' },
{
title: '性别',
dataIndex: 'sex',
key: 'sex',
scopedSlots: { customRender: 'sex' } //开启插槽，插槽名为`sex`
},
...
];
<a-table
:columns='columns'
:data-source='data'>
//正常使用插槽就好了，看不懂的补补插槽，text: 要渲染的数据| record：该行的所有数据 | index 该行的序号
<template #sex='text, record, index'>
{{ text?'男':'女' }}
</template>
</a-table>
