使用antd design vue遇到的一些问题(1)
如何在表格中插入图片<a-table :columns="columns" :dataSource="data" :pagination="pagination"><template slot="image" slot-scope="image"><img :src="image" style="width:50px;height...
·
如何在表格中插入图片
<a-table :columns="columns" :dataSource="data" :pagination="pagination">
<template slot="image" slot-scope="image">
<img :src="image" style="width:50px;height:50px" />
</template>
<span slot="action" >
<a @click="handleEdit()">编辑</a>
<a-divider type="vertical" />
<a @click="handledel()">删除</a>
</span>
<a-pagination v-model="current" :total="50" />
</a-table>
data () {
const columns = [
{ title: '讲师头像', dataIndex: 'image', key: '1', width: 100 ,scopedSlots: { customRender: 'image' },align:'center'},
{ title: '讲师姓名', dataIndex: 'age', key: '2', width: 100,align:'center'},
{ title: '讲师简介', dataIndex: 'a', key: '3', width: 200 ,align:'center'},
{ title: '操作',dataIndex: 'action',width: 150,scopedSlots: { customRender: 'action' },align:'center'}
];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
image:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
a:1
});
}
return {
data,
columns,
pagination:{pageSize:15}
}
},
在columns里添加scopedSlots属性,里面的customRender对应slot的值,上面的代码中slot-scope对应的是data里的某个值,如果有两个参数,则第二个表示当前的整个数据
更多推荐
已为社区贡献1条内容
所有评论(0)