vue 在表格中点击图片名称根据函数和图片url预览图片

您可以在表格中的每个图片名称单元格中加入一个点击事件，然后在点击事件中调用一个函数来预览图片。具体实现方式如下所述：

1. 在表格中的每个图片名称单元格中加入点击事件。使用 Vue 的 `@click` 指令可以很方便地实现这个功能。

示例代码：

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>
        <img :src="item.imageUrl" @click="previewImage(item.imageUrl)">
      </td>
    </tr>
  </table>
</template>

2. 在点击事件中调用一个函数来预览图片。您可以使用 Vue 的 `$emit` 方法来触发一个自定义事件，并将图片的 URL 作为参数传递给事件处理函数。

示例代码：

export default {
  methods: {
    previewImage(imageUrl) {
      this.$emit('preview-image', imageUrl)
    }
  }
}

3. 在父组件中监听这个自定义事件，并在事件处理函数中展示预览图片的组件。

示例代码：

<template>
  <div>
    <table-component @preview-image="showPreviewImage"></table-component>
    <preview-image :imageUrl="previewImageUrl" v-if="previewImageUrl"></preview-image>
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'
import PreviewImage from './PreviewImage.vue'

export default {
  components: {
    TableComponent,
    PreviewImage
  },
  data() {
    return {
      previewImageUrl: ''
    }
  },
  methods: {
    showPreviewImage(imageUrl) {
      this.previewImageUrl = imageUrl
    }
  }
}
</script>

在上面的代码中，我们创建了一个 `previewImageUrl` 变量，它会在点击图片名称单元格时被赋值为当前图片的 URL。然后我们在模板中使用 `v-if` 指令来判断是否需要展示预览图片组件。如果 `previewImageUrl` 不为空，则展示预览图片组件，并将图片 URL 作为 `imageUrl` 属性传递给组件。

希望这个回答能够帮助到您！