Vue2.0 + ElementUI <el-table>中显示图片并且可以点击预览

Vue2.0 + ElementUI <el-table>中显示图片并且可以点击预览 [ 技术杂谈 ]

九叶的小窝文章正文

九叶

{{nature("2021-05-28 12:33:57")}}更新

1. 如何在elementUI的表格中实现图片的显示预览

效果如下图所示：

要想实现这个效果，我们可以使用elementUI中的标签来操作，它包含有两个标签，第一个是悬浮放大的图片定义，第二个是表格中显示的缩略图定义。

里面的trigger属性用于设置何时触发 Popover，支持四种触发方式：

hover 鼠标移入，click 鼠标点击，focus 鼠标按住，manual 手动开关

参数	说明	类型	可选值	默认值
trigger	触发方式	String	click/focus/hover/manual	click

对于触发 Popover 的元素，有两种写法：

使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

详细说明可以访问elementUI官网进行查看

具体的实现代码如下：

<el-table-column label="图片" align="center" width="150px">
  <template slot-scope="scope">
    <el-popover
      placement="right"
      trigger="click">
      <im g style="width: auto;height: 500px" :src="imgUrl + scope.row.photos" />
      <div style="padding:2px;border:2px solid #cceff5;background:#fafcfd; border-radius: 7px;" v-if="scope.row.photos !==null" slot="reference">
        <el-image style="max-height: 100px; vertical-align: middle; border-radius: 7px;" fit="cover" :src="imgUrl + scope.row.photos">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
    </el-popover>
  </template>
</el-table-column>