使用ant.design table组件加人图片

我要实现的功能如下:

里面是动态展示,根据取出的数据有几个显示几个。

1,我这边的数据去出来是一个状态的字符串,要自己截取

其中dataList是从接口取出的原始数组

url对应的是每个状态的图片地址

urlArr是接下来要进行绑定的数组

此pumpStatus为你要进行table渲染的dataIndex设置的值,就是columns中设置的。

以上。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Ant DesignTable 中显示图片,可以使用 `render` 函数来渲染每一行的数据,并在其中添 `img` 标签来显示图片。具体步骤如下: 1. 在 Table 中,使用 `render` 函数来渲染每一行的数据,其中包括需要显示图片的列。 2. 在 `render` 函数中,使用 `img` 标签来显示图片。可以使用 `record` 参数来获取当前行的数据,并从中获取图片的链接。 下面是一个简单的示例代码: ```vue <template> <a-table :columns="columns" :data-source="data" /> </template> <script> export default { data() { return { data: [ { name: "John Brown", age: 32, avatarUrl: "https://example.com/avatar.jpg", }, { name: "Jim Green", age: 42, avatarUrl: "https://example.com/avatar.jpg", }, ], }; }, computed: { columns() { return [ { title: "Name", dataIndex: "name", }, { title: "Age", dataIndex: "age", }, { title: "Avatar", dataIndex: "avatarUrl", scopedSlots: { customRender: "avatar" }, }, ]; }, }, methods: { renderAvatar(url) { return <img src={url} style="width: 50px" />; }, }, }; </script> ``` 在这个示例中,我们使用 `render` 函数来渲染每一行的数据,并在其中添 `img` 标签来显示图片。在 `columns` 中,我们将 `avatarUrl` 列的 `scopedSlots` 属性设置为 `customRender: 'avatar'`,表示使用名为 `avatar` 的 `slot` 来渲染这一列。在 `methods` 中,我们定义了一个名为 `renderAvatar` 的函数,用于渲染图片。最终,我们将 `renderAvatar` 函数作为 `avatar` `slot` 的内容,从而显示图片。 希望这可以帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值