ant-design框架table中插入图片(已解决)

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'
        }
  ]
  • 效果展示:
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值