這兩天一直在用 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>