这两天一直在用 Antdv 做一些小 demo，今天在做表格的时候想在表格中插入图片，简单翻了下文档和国内的博客，发现所有的方法竟然都不好使，最后还是在官网的示例代码中看到相关的部分，不得不说这种 ui框架的文档理解起来还是有点费劲 🤔
先写出最基本的 Table 框架
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' },
},
只有最后一行是新加上去的 😎
* 更改下模板中的代码
省略了部分样式代码，想看完整代码的话：
2022-9-30 增更
之前的方法已经弃用，代码修改至如下：
const columns = [
...
{
title: '图片',
dataIndex: 'picurl',
key: 'pic',
// slots: { customRender: 'pic' },
// ↑ 上面这一行不需要写了
},
]
Original: https://www.cnblogs.com/hhsk/p/16742439.html
Author: HuStoking
Title: Ant Design Vue 在表格中插入图片
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/603169/
转载文章受原作者版权保护。转载请注明原作者出处！