elementPlus在table表格中实现图片移入放大效果

方法参照官网的写法，但是官网的写法是使用的url地址，而我的需求是使用传入的地址。

先分析官网写法（我截取需要的部分）

<template>
  <div style="display: flex; align-items: center">
    <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://avatars.githubusercontent.com/u/72015883?v=4"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Element Plus
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @element-plus
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            Element Plus, a Vue 3 based component library for developers,
            designers and product managers
          </p>
        </div>
      </template>
    </el-popover>
  </div>
</template>

上面的 #reference 表示正常情况下显示的内容 #default 为当鼠标移入后显示的内容，因为这里是用的网络图片，而我需要的是table中传入进来的地址
所以要想实现这个功能就要给这个tanble中的值传入数据。所以在这个代码之上，我又嵌套了一层template

<el-table-column label="图片" width="150">
        <!-- scope.row.menuPicture -->
        <template #default="scope">
          <el-popover :width="300" placement="right">
            <template #reference>
              <el-image :src="scope.row.menuPicture" width="50px" />
            </template>
            <template #default>
              <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
              >
                <el-image
                  :size="60"
                  :src="scope.row.menuPicture"
                  style="margin-bottom: 8px"
                />
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>

这里最外层的template添加了table表传递过来的scope 然后再在下面需要的地方设置src值，实现自己需要的功能