vue 在columns中显示图片

在 Vue 的表格组件中，如果需要在表格中显示图片，可以在 columns 中使用自定义模板来实现。

首先，需要在表格的 columns 中定义一个自定义的模板，例如：

columns: [
  {
    title: '图片',
    dataIndex: 'imageUrl',
    scopedSlots: {
      customRender: 'image'
    }
  },
  // 其他列...
]

其中，`scopedSlots` 属性用于定义插槽，`customRender` 是自定义插槽的名称，`image` 是具体的插槽模板。

接着，在 Vue 的模板中，可以定义 `image` 插槽模板，例如：

<template>
  <a :href="scope.row.imageUrl">
    <img :src="scope.row.imageUrl" alt="" style="max-width: 100px;">
  </a>
</template>

其中，`scope.row.imageUrl` 是每行数据中的图片地址，`a` 标签用于包裹图片，可以将图片设置为超链接（如果需要），`img` 标签用于显示图片。

最后，需要在表格组件中使用 `customRender` 插槽模板，例如：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource">
      <template slot="image" slot-scope="scope">
        <a :href="scope.row.imageUrl">
          <img :src="scope.row.imageUrl" alt="" style="max-width: 100px;">
        </a>
      </template>
    </a-table>
  </div>
</template>

其中，`slot` 属性用于定义插槽名称，`slot-scope` 属性用于接收插槽数据，`slot` 模板中的 `image` 对应于表格中定义的 `customRender` 插槽名称。

这样，在表格中就可以显示图片了。