antd-vue中表格的使用
效果图：
一，基本的使用
代码：
<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拿到数据进行操作