Elementui中在表格中插入图片

news/2024/7/10 2:42:32 标签: html, html5, vue, elementui, css
效果:

在这里插入图片描述

插入单张选中放大:
<el-table-column  label="商品详情">
  <template slot-scope="scope">
    <el-popover placement="top-start" title="" trigger="hover">
      <img :src="scope.row.product.cover" alt="" style="width: 150px;height: 150px">
      <img slot="reference" :src="scope.row.product.cover" style="width: 30px;height: 30px">
    </el-popover>
    <span>{{scope.row.title}}</span>
  </template>
</el-table-column>
插入多张图片:
<el-table-column  label="面料图片">
  <template slot-scope="scope">
    <el-image v-for="(item, index) in scope.row.image_info" :key='index' style="width: 30px; height: 30px" :src="item.image" :preview-src-list="[item.image]"></el-image>
  </template>
</el-table-column>

http://www.niftyadmin.cn/n/1527253.html

相关文章

React脚手架public文件介绍

public文件夹下index.js <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><!-- %PUBLIC_URL%代表public文件夹的路径 --><link rel"icon" href"%PUBLIC_URL%/favicon.ico" /><…

Elementui实现面包屑($route.matched)

this.$route.matched匹配到的会是一个数组&#xff0c;包含当前页面之前所有路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。 //demo <template><div class"nav-wrap"><router-link v-for"(item, index) in navList" :key&…

Vue中$router和$route的常用api

一、$router router是VueRouter的一个对象&#xff0c;通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象&#xff0c;这个对象中是一个全局的对象&#xff0c;他包含了所有的路由包含了许多关键的对象和属性。 $router.push // 字符串 this.$router.push…

Vue动态组件(:is)

概念&#xff1a; 让多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件。 通过使用保留的 <component> 元素&#xff0c;动态地绑定到它的 is 特性&#xff0c;可以实现动态组件 1、基础用法 <div id"example"><button c…

Vue中路由表单缓存(keep-alive)

vue 中从一个路由切换到另一个路由的时候&#xff0c;第一个路由可能有表单信息&#xff0c;但切换到第二个路由时&#xff0c;第一个路由里的组件会被销毁&#xff0c;表单里填写的 value 也会消失&#xff0c;keep-alive 就可以帮我们缓存我们不想被销毁的组件。 页面效果&a…

TCP总结:socket

文章目录 参考简介正常TCP 建链、拆链示例半连接定义(TCP, 已建立的链接,收到PUSH包,不带ACK,会被drop)TCP 发送rst的情况已建立的链接,收到PUSH包,不带ACK,会被drop导致进程假死的表面现象TCP push 消息重传次数设置为什么tcp/udp 端口个数时65535个?tcpdump 抓包忽略T…

Core dump 分析实例一

64位机,从log里得到的backtrace信息:00007f0af65c7079 00007f0af65f20e1;是动态链接库的地址 /usr/lib64/libc-2.17.so: 7f0af657a000-7f0af6943000 通过objdump -D 反编译libc-2.17.so 文件,可以查找到对应的coredump发生的位置。 00007f0af65c7079 - 7f0af657a000 = 4…

Mobx的使用

文章目录1、Mobx简介2、Mobx的使用2.1、环境搭建2.2、Mobx基础操作2.2.1、observable可观察的状态2.2.2、 observable装饰器2.2.3、对 observables 作出响应3、在react项目中使用mobx3.1、环境搭建3.2、案例核心代码1、Mobx简介 2、Mobx的使用 2.1、环境搭建 创建项目 mkdi…