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拿到数据进行操作