1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>点击图片放大图片预览左右切换</title>
8 <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
9 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
10 <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
11 <style>
12 .el-image__inner {
13 width: 100%;
14 height: 100%;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20 <div class="demo-image__preview">
21 <el-image
22 style="width: 100px; height: 100px"
23 :src="url"
24 :preview-src-list="srcList">
25 </el-image>
26 </div>
27 <el-table
28 :data="tableData"
29 style="width: 100%">
30 <el-table-column
31 label="图片"
32 width="180">
33 <template slot-scope="scope">
34 <el-image
35 style="width: 100px; height: 100px"
36 :src="scope.row.url"
37 :preview-src-list="scope.row.srcList"
38 >
39 </el-image>
40 </template>
41 </el-table-column>
42 <el-table-column
43 prop="date"
44 label="日期"
45 width="180">
46 </el-table-column>
47 <el-table-column
48 prop="name"
49 label="姓名"
50 width="180">
51 </el-table-column>
52 <el-table-column
53 prop="address"
54 label="地址">
55 </el-table-column>
56 </el-table>
57 </div>
58
59 <script>
60 var app = new Vue({
61 el: ‘#app‘,
62 data() {
63 return {
64 url: ‘https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg‘,
65 srcList: [
66 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘,
67 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘
68 ],
69 tableData: [{
70 date: ‘2016-05-02‘,
71 name: ‘王小虎‘,
72 address: ‘上海市普陀区金沙江路 1518 弄‘,
73 url: ‘https://cn.bing.com/th?id=OIP.4Zu1i_Id-ZHrm2qXDSghwAHaEz&pid=Api&rs=1‘,
74 srcList: [
75 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘,
76 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘
77 ]
78
79 }, {
80 date: ‘2016-05-04‘,
81 name: ‘王小虎‘,
82 address: ‘上海市普陀区金沙江路 1517 弄‘,
83 url: ‘http://photocdn.sohu.com/20100628/Img273133689.jpg‘,
84 srcList: [
85 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘,
86 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘
87 ]
88 }, {
89 date: ‘2016-05-01‘,
90 name: ‘王小虎‘,
91 address: ‘上海市普陀区金沙江路 1519 弄‘,
92 url: ‘http://www.fj.xinhuanet.com/titlepic/112424/1124243097_1552731566217_title0h.jpg‘,
93 srcList: [
94 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘,
95 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘
96 ]
97 }, {
98 date: ‘2016-05-03‘,
99 name: ‘王小虎‘,
100 address: ‘上海市普陀区金沙江路 1516 弄‘,
101 url: ‘http://pica.nipic.com/2008-03-26/2008326165225669_2.jpg‘,
102 srcList: [
103 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘,
104 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘
105 ]
106 }]
107 }
108 }
109 })
110 </script>
111 </body>
112 </html>
原文地址：https://www.cnblogs.com/jspang/p/11684147.html
时间： 2024-11-03 18:20:36