vue中element-ui表格缩略图悬浮放大功能的实例代码
2018-06-26 10:42
3559 查看
element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下:
具体的代码(此处只是图片单元格的代码,其它代码省略):
<el-table-column prop="picture" header-align="center" align="center" width="150px" label="图片"> <template slot-scope="scope"> <el-popover placement="right" title="" trigger="hover"> <img :src="scope.row.picture"/> <img slot="reference" :src="scope.row.picture" :alt="scope.row.picture" style="max-height: 50px;max-width: 130px"> </el-popover> </template> </el-table-column>
其中可以看到<el-popover>标签包围的有两个<img/>标签,第一个是悬浮放大的图片定义,第二个是表格中显示的索勒图定义,它有一个关键的属性
slot="reference"。而
<el-popover>的触发方式是 hover,即当鼠标浮动在表格图片上时,自动显示大图片,除了支持 hover 方式外,还支持 click,focus 和 manual;此处title的属性值设为"",即不显示标题。
此处缩略图和大图都是同一张图片,如果有不同的图片,也是可以的,只需要在 :src 中设置不同的值即可
关于Popover的详细使用说明,建议参考官方文档Popover弹出框
总结
以上所述是小编给大家介绍的vue中element-ui表格缩略图悬浮放大功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue+element的表格实现批量删除功能示例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- vue+element-ui+ajax的一个表格实例
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- Vue+element-ui 实现表格的分页功能示例
- vue中使用element-ui进行表单验证的实例代码
- vue+element-ui+ajax实现一个表格的实例
- 利用vue和element-ui设置表格内容分页的实例
- element UI table表格组件使用[超级完整功能]
- vue + element-ui实现简洁的导入导出功能
- elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
- VUE2.0+Element-UI+Echarts封装的组件实例
- xls表格导入数据库功能实例代码
- xls表格导入数据库功能实例代码
- 搭建element-ui的Vue前端工程操作实例
- 使用vue实现grid-layout功能实例代码
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- vue中子组件向父组件传递数据的实例代码(实现加减功能)