|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<a-card title="树形结构图片翻页查看" style="min-width: 800px;overflow-x:auto ">
<a-row>
<!-- 左侧文件树 -->
<a-col :span="5">
<a-tree
showLine
:treeData="treeData"
:expandedKeys="[expandedKeys[0]]"
:selectedKeys="selectedKeys"
:style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
@expand="onExpand"
@select="this.onSelect"
>
</a-tree>
</a-col>
<!--右侧缩略图-->
<a-col :span="19">
<a-row style="margin-top: 10px">
<a-col :span="24" style="padding-left: 2%;margin-bottom: 10px">
|
|
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
export default {
name: 'ImgTurnPage',
components: {
draggable
},
data() {
return {
description: '图片翻页',
//数据集
treeData: [{
title: '第一页',
key: '0-0',
children: [{
title: '1页',
key: '0-0-0',
imgUrl: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg'
}, {
title: '2页',
key: '0-0-1',
imgUrl: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
}]
}, {
title: '第二页',
key: '0-1',
children: [{
title: '1页',
key: '0-1-0',
imgUrl: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
}, {
title: '2页',
key: '0-1-1',
imgUrl: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
}]
}, {
title: '第三页',
key: '0-2',
children: [{
title: '1页',
key: '0-2-0',
imgUrl: 'https://static.jeecg.com/upload/test/1374962_1587621329085.jpg'
}]
}],
selectedKeys: [],
expandedKeys: [],
sort: 0,
imgUrl: '',
navName: '',
imgList: [],
}
},
created() {
this.getImgList();
},
methods: {
getImgList() {
var count = 0;
for (var i = 0; i < this.treeData.length; i++) {
for (var j = 0; j < this.treeData[i].children.length; j++) {
this.imgList.push({
key: this.treeData[i].children[j].key,
pkey: this.treeData[i].key,
sort: count++,
imgUrl: this.treeData[i].children[j].imgUrl,
navName: this.treeData[i].title + "/" + this.treeData[i].children[j].title
})
}
}
this.setValue(this.imgList[this.sort]);
|
|
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
this.setValue(this.imgList[this.sort]);
},
next() {
if (this.sort === this.imgList.length - 1) {
this.sort = 0;
} else {
this.sort = this.sort + 1;
}
this.setValue(this.imgList[this.sort]);
},
// 设置受控节点值
setValue(value) {
this.selectedKeys = [];
this.imgUrl = value.imgUrl;
this.selectedKeys[0] = value.key;
this.expandedKeys[0] = value.pkey;
this.navName = value.navName;
|