ant-design框架table中插入图片
使用render未达到预期效果,使用slot则可以实现。
- 组件部分:
<a-table size="default"
:rowKey="record => record.key"
:columns='columns'
:data-source='tableData'
rowKey="adId">
<span slot='picture' slot-scope="text, record">
<template>
<img
slot="picture"
width='150'
height='100'
style="cursor: pointer"
:src='record.picture'
alt='缩略图'>
</template>
</span>
</a-table>
- columns部分:
columns: [
{
dataIndex: 'picture',
title: '广告图片',
scopedSlots: { customRender: 'picture' },
width: '150',
height: '100',
align: "center",
}
//其他列未展示
]
- data部分:
tableData: [
{
title: '好丽友',
activityBelong: '任意活动',
picture: 'https://video.acwing.com/image/default/09D8D059E05D4D00B4A39A8FDAC4D0D4-6-2.jpg?auth_key=1691020800-ac2796wing-0-0fec1d8d06a90033422c106b614c4ea9',
activityUrl: 'https://csdnnews.blog.youkuaiyun.com',
publishTime: '2023-07-25',
isShow: true,
backgroundColor: '红色',
operation: '',
sort: 1,
adId: '001'
}
]
- 效果展示: