Ant Design Vue 在表格中插入图片

这两天一直在用 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>
  

• 再次刷新下服务器

  

  省略了部分样式代码，想看完整代码的话：

  这里

---

在线预览

---

---

2022-9-30 增更

之前的方法已经弃用，代码修改至如下：

const columns = [
  ...
  {
    title: '图片',
    dataIndex: 'picurl',
    key: 'pic',
    // slots: { customRender: 'pic' },
    // ↑ 上面这一行不需要写了
  },
]

<a-table :data-source="dataSource" :columns="columns">
  <template v-slot:bodyCell="{ column, record, index}">
    <template v-if="column.dataIndex === 'picurl'">
        <img :src="record.picurl" />
    </template>
  </template>
</a-table>