ant design 预览图片_AntDesign vue学习笔记（六）Table 显示图片

好的，你的问题是如何在 Ant Design 的 Table 中显示预览图片。对吧？

如果是这样的话，可以考虑使用 Ant Design 中的 Upload 组件和 Modal 组件来实现。具体步骤如下：

1. 在 Table 中，使用 render 函数来渲染每一行的数据，其中包括需要显示预览图片的列。

2. 在 render 函数中，使用 Upload 组件来上传图片，并将图片的 url 存储在 state 中。

3. 在 render 函数中，使用 Modal 组件来显示预览图片。当用户点击图片时，Modal 组件会显示图片的预览。

下面是一个简单的示例代码：

<template>
  <a-table :columns="columns" :data-source="data">
    <template #avatar="text">
      <a-upload
        :show-upload-list="false"
        :before-upload="handleUpload"
      >
        <a-avatar :src="avatarUrl" />
      </a-upload>
      <a-modal :visible="previewVisible" @cancel="handleCancel">
        <a-img :src="previewImage" />
      </a-modal>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: "John Brown",
          age: 32,
          avatarUrl: "",
        },
      ],
      previewVisible: false,
      previewImage: "",
    };
  },
  methods: {
    handleUpload(file) {
      // 上传图片，并将图片的 url 存储在 state 中
      this.avatarUrl = URL.createObjectURL(file.raw);
    },
    handlePreview(url) {
      // 显示图片预览
      this.previewImage = url;
      this.previewVisible = true;
    },
    handleCancel() {
      // 隐藏图片预览
      this.previewVisible = false;
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "Name",
          dataIndex: "name",
        },
        {
          title: "Age",
          dataIndex: "age",
        },
        {
          title: "Avatar",
          dataIndex: "avatarUrl",
          scopedSlots: { customRender: "avatar" },
          width: "20%",
        },
      ];
    },
  },
};
</script>

在这个示例中，我们使用了 Upload 组件来上传图片，并将图片的 url 存储在 state 中。在 render 函数中，我们使用了 Modal 组件来显示预览图片。当用户点击图片时，Modal 组件会显示图片的预览。

希望这可以帮助到你！