在 ant design vue 的Table组件中 展示图片的方法

可以使用 render 函数来自定义列的展示方式，代码示例如下：

<template>
  <a-table :columns="columns" :data-source="data">
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: 'John Brown',
          age: 18,
          avatar: 'https://www.example.com/avatar.jpg',
        },
        {
          name: 'Jim Green',
          age: 24,
          avatar: 'https://www.example.com/avatar.jpg',
        },
        {
          name: 'Joe Black',
          age: 30,
          avatar: 'https://www.example.com/avatar.jpg',
        },
      ],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Avatar',
          dataIndex: 'avatar',
          customRender: (url) => {
            return <img src={url} alt="Avatar" />;
          },
        },
      ],
    };
  },
};
</script>

在代码中，我们定义了一个 data 数组用于存放表格的数据，其中包含了每个人的名字、年龄和头像图片的 URL。然后我们定义了一个 columns 数组来描述表格的各列。其中 Avatar 列使用了 customRender 属性来指定该列使用自定义渲染方式，我们在该函数中返回了一个 img 元素来展示头像图片。最后在模板中使用 a-table 组件来展示数据即可。