这两天一直在用 Antdv 做一些小 demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的部分,不得不说这种 ui框架的文档理解起来还是有点费劲 🤔
先写出最基本的 Table 框架
<template>
<a-table :data-source=dataSource :columns=columns></a-table>
</template>
import appleUrl from '@/assets/apple.jpg';
import pearsUrl from '@/assets/pears.jpg';
import jackfruitUrl from '@/assets/jackfruit.jpg';
import jujubeUrl from '@/assets/jujube.jpg';
import litchiUrl from '@/assets/litchi.jpg';
// import 路径是因为打包时候方便,实际上表格中
// 的数据都是从后台数据库中获取的,不使用 import
// 的话也可以像下面这样:
// picurl: 'src/assets/apple.jpg',
// 随便写点数据
const dataSource = [
{
key: '1',
fruitName: 红富士苹果,
picurl: appleUrl,
price: 24.2,
stock: 70,
saleForDay: 23
},
{
key: '2',
fruitName: 山东大鸭梨,
picurl: pearsUrl,
price: 74.2,
stock: 80,
saleForDay: 24
},
{
key: '3',
fruitName: 新疆红枣,
picurl: jujubeUrl,
price: 78.4,
stock: 190,
saleForDay: 7,
},
{
key: '4',
fruitName: 海南波罗蜜,
picurl: jackfruitUrl,
price: 78,
stock: 8,
saleForDay: 3,
},
{
key: '5',
fruitName: 广东妃子笑,
picurl: litchiUrl,
price: 24.2,
stock: 70,
saleForDay: 23
},
];
const columns = [
{
title: '水果名称',
dataIndex: 'fruitName',
key: 'fruitName',
},
{
title: '图片',
dataIndex: 'picurl',
key: 'pic',
},
{
title: '价格 (元/公斤)',
dataIndex: 'price',
key: 'price',
},
{
title: '库存(公斤)',
dataIndex: 'stock',
key: 'stock',
},
{
title: '今日销量',
dataIndex: 'saleForDay',
key: 'saleForDay',
},
]
渲染一下,不出意外的话是不会有图片出现的,因为我们只配置了图片的路径,并没有写任何能够渲染图片的代码。
在表格中渲染图片
-
更改一下
columns
中的 「图片」{
title: '图片',
dataIndex: 'picurl',
key: 'pic',
slots: { customRender: 'pic' },
},只有最后一行是新加上去的 😎
-
更改下模板中的代码
<template>
<a-table :data-source=dataSource :columns=columns>
<template #pic=url>
<img :src=url.value />
</template>
</a-table>
</template> -
再次刷新下服务器
省略了部分样式代码,想看完整代码的话:
这里
在线预览