关于Ant-design中table的使用及数据挂载的问题
其实官方文档中的静态写法已经说明了挂载数据的方法,但是奈何我第一次用- -
在:data-source动态绑定数据源之后,用column中的dataIndex指定数据源对象中下的哪一个数组对象,当需要添加按钮和其他操作的时候,可以使用column的scopedSlots: { customRender: ‘checkbox’ }来制定插槽
// An highlighted block
<a-table
:columns="columns"
:data-source="this.userList"
:rowKey="record => record.id"
>
<template slot="checkbox" slot-scope="text, e">
<a-switch
:defaultChecked="text"
@change="changeState(e)"
/>
</template>
<template slot="opration">
<a-button type="link" class="opration_btn">
修改
</a-button>
<a-button type="link" class="opration_btn">
删除
</a-button>
</template>
</a-table>
// 这里是script中定义的column,注意不是写在data中的,是在export default外面写的,在data中挂载一下columns就能用了。
const columns = [
{
title: 'NO',
dataIndex: 'id',
width: 80
},
{
title: '姓名',
dataIndex: 'username',
width: 120
},
{
title: '邮箱',
dataIndex: 'email',
width: 180
},
{
title: '电话',
dataIndex: 'mobile',
width: 150
},
{
title: '角色',
dataIndex: 'role_name',
width: 100
},
{
title: '状态',
dataIndex: 'mg_state',
width: 100,
scopedSlots: { customRender: 'checkbox' }
},
{
title: '操作',
width: 200,
scopedSlots: { customRender: 'opration' }
}
]
还有几个地方需要注意
—rowkey
table中的:rowkey=“record=>record.id”,这一步主要是表示表格中的行,还可以绑定数据源中的id。不写会报错很烦
—slot-scope(text,record)
在使用作用域插槽的时候一定要传两个值,slot-scope(text,record),从我的代码中可以看到,这个插槽是checkbox的插槽,所以第一个值text自然是dataIndex指定的mg_state,第二个值e,是一个函数对象,用于下边触发点击事件时此行的事件回调,如果不写的话就会导致无法获取当前是哪一行。 刚开始我没写这个回传函数,导致我后面虽然能获取到switch的状态,但是获取不到是哪一行,所以状态也是死的。
这两个值的名称无所谓,并不一定非要是(text,record)