elementui 表格中存放图片，点击变大

最新推荐文章于 2024-06-16 20:09:24 发布

zyue_1217

最新推荐文章于 2024-06-16 20:09:24 发布

阅读量141

点赞数

分类专栏： element 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/zyue_1217/article/details/125428581

版权

element 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文介绍了如何在Element UI的表格中使用el-popover组件，通过'click'触发方式，将菜品图片作为hover内容，当鼠标悬停时展示图片的放大视图，通过'top-start'定位。详细展示了HTML结构和配置参数。

摘要由CSDN通过智能技术生成

使用el-popover标签
trigger为触发方式,可为click/focus/hover/manual
placement为出现位置，不填默认是底部
reference为触发 Popover 显示的 HTML 元素,可以设置大小

<el-table-column prop="dishImg" label="菜品图片" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="click">
              <img :src="scope.row.dishImg" alt="">
              <img slot="reference" :src="scope.row.dishImg" style="width: 100%;height: 100%">
            </el-popover>
          </template>
        </el-table-column>