效果圖：
一，基本的使用
代碼：
<a-table bordered :dataSource="userList" :columns="columns" rowKey="id" :pagination="false">
<template slot="sort" slot-scope="text, record,index">{{index+1}}</template>
<template slot="avatar" slot-scope="text, record">
<a-avatar :src="record.avatarUrl" :size="64"></a-avatar>
</template>
<template slot="operation" slot-scope="text, record">
<a-button @click="onDelete(record.name)">刪除</a-button>
</template>
</a-table>
js：
data() {
return {
columns: [
{ title: "序號", scopedSlots: { customRender: "sort" }, width: 80 },
{
title: "姓名",
dataIndex: "userName",
width: 200
},
{
title: "用戶id",
dataIndex: "id",
width: 100
},
{
title: "性別",
dataIndex: "sex",
width: 100
},
{
title: "手機號碼",
dataIndex: "mobile",
width: 300
},
{
title: "openid",
dataIndex: "openid",
width: 300
},
{
title: "頭像",
dataIndex: "avatarUrl",
scopedSlots: { customRender: "avatar" },
width: 100
},
{
title: "操作",
dataIndex: "operation",
scopedSlots: { customRender: "operation" },
width: 200
}
]
名稱解釋：bordered 顯示錶格邊框 ，:dataSource 表格的數據（數組格式,在data中），:columns 表格的列目，（在data中），
rowKey 設置表格的每行的key值 不設置會報錯，（設置爲id，是因爲我的userList中每個數據都有id值）:pagination設置分頁信息（false，不顯示分頁）
二，功能解釋
1，表格的序號遞增
<template slot="sort" slot-scope="text, record,index">{{index+1}}</template>
使用的slot的值要與columns中的 scopedSlots: { customRender: "sort" }中的對應， slot-scope中的 text和record都是可以獲取這一行的數據，實現序號遞增只需要index+1即可（index從0開始）。
2，在表格中插入數據
<template slot="avatar" slot-scope="text, record">
<a-avatar :src="record.avatarUrl" :size="64"></a-avatar>
</template>
也是使用 slot方法，通過record獲取到這行數據中的圖片地址
3，實現事件操作
如：刪除，查看詳情等 需要表格中的數據的事件操作
<template slot="operation" slot-scope="text, record">
<a-button @click="onDelete(record.name)">刪除</a-button>
</template>
在methods:{
onDelete(val) {
console.log("del", val);
},
使用slot方法，使用record拿到數據進行操作
微信小程序【My簡歷】有需要的可以瞭解一下：張三的簡歷
