Ant Design Vue table 表格中的图片点击放大

Ant Design Vue 的 Table 组件支持自定义列，你可以在自定义列中添加一个点击事件来实现图片的放大效果。具体步骤如下：

1. 在 Table 的 columns 中添加一个自定义列，如下所示：

{
  title: '图片',
  dataIndex: 'imageUrl',
  scopedSlots: { customRender: 'imageUrl' }
},

这里的 `scopedSlots` 属性用于定义自定义列的渲染方式。

2. 在 Table 的 `template` 中定义 `customRender` 的具体实现，如下所示：

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template slot="imageUrl" slot-scope="text">
      <a @click="showModal(text)">
        <img :src="text" style="width: 50px; height: 50px">
      </a>
    </template>
  </a-table>
</template>

这里的 `slot` 属性用于定义自定义列的名称，`slot-scope` 属性用于获取当前行的数据对象。

3. 在 `methods` 中定义 `showModal` 方法，用于显示放大后的图片：

methods: {
  showModal(text) {
    this.imageUrl = text;
    this.visible = true;
  },
},

在 `showModal` 方法中，我们将当前行的图片地址保存到 `imageUrl` 变量中，并将 `visible` 变量设置为 `true`，以显示 `Modal` 弹窗。

4. 在 `template` 中添加 `Modal` 弹窗组件，如下所示：

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template slot="imageUrl" slot-scope="text">
      <a @click="showModal(text)">
        <img :src="text" style="width: 50px; height: 50px">
      </a>
    </template>
  </a-table>
  <a-modal v-model="visible">
    <img :src="imageUrl" style="max-width: 100%">
  </a-modal>
</template>

这里的 `v-model` 属性用于控制 `Modal` 弹窗的显示和隐藏，当 `visible` 变量为 `true` 时，弹窗显示；当 `visible` 变量为 `false` 时，弹窗隐藏。

这样，当用户点击表格中的图片时，就会弹出一个模态框，显示放大后的图片。用户点击模态框外部区域或者关闭按钮，模态框就会关闭，放大后的图片也会随之消失。