怎么检测鼠标是否在ui上，如果在就替换image的图片

在Element UI的table组件中，你可以通过监听`mouseover`和`mouseout`事件以及结合`pointer-events`属性来实现鼠标悬浮时图片的预览与蒙层显示。以下是一个简单的示例：

1. 首先，在`<el-table>`的data中包含图片链接和原始图片展示的占位符（如占位图标）:

<el-table-column prop="imageLink" label="图片">
  <template slot-scope="scope">
    <el-image :src="scope.row.placeholderImage" v-if="!isHovering" @mouseenter="showPreview(scope.row.imageLink)" @mouseleave="hidePreview"></el-image>
    <img :src="previewImageUrl" v-if="isHovering" class="preview-image" style="display:none;" @click="hidePreview" />
  </template>
</el-table-column>

2. 初始化状态变量`previewImageUrl`为空，表示未预览的状态：

data() {
  return {
    previewImageUrl: '',
    isHovering: false,
  };
},

3. 定义方法`showPreview`和`hidePreview`来切换预览图片和隐藏遮罩层：

methods: {
  showPreview(imageLink) {
    this.previewImageUrl = imageLink;
    document.querySelector('.preview-image').style.display = 'block';
    this.isHovering = true;
  },
  hidePreview() {
    this.previewImageUrl = '';
    document.querySelector('.preview-image').style.display = 'none';
    this.isHovering = false;
  },
},

4. `@mouseenter`事件触发`showPreview`方法，将当前图片链接赋值给`previewImageUrl`，显示预览图片；`@mouseleave`事件触发`hidePreview`方法，恢复原始图片并隐藏预览图片。

这样，当鼠标悬停在图片上时，预览图片会显示出来，同时背景会有蒙层效果。当鼠标移开时，蒙层消失并回到原始图片。