MyPic.vue

<template>
	<div>
		<el-container>
			<el-main>
				<el-select v-model="picType" placeholder="请选择" @change="queryPic">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-table border :data="picList" v-loading="loading">
					<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
					<el-table-column prop="picName" label="图片名字" width="240" show-overflow-tooltip></el-table-column>
					<el-table-column align="center">
						<template slot-scope="props">
							<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl)" style="cursor: pointer" />
						</template>
					</el-table-column>
					<el-table-column label="创建时间" width="170">
						<template slot-scope="props">
							{{ props.row.createTime | dateFormat }}
						</template>
					</el-table-column>
				</el-table>
				<el-dialog :visible.sync="imageDialogVisible" width="30%">
					<img :src="enlargedImageUrl" alt="放大图片" style="width: 100%" />
				</el-dialog>
				<el-pagination class="pagination" background :key="elementui_page_component_key" :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	name: 'MyPic',
	data() {
		return {
			// 用户列表数据
			picList: [],
			loading: false,
			elementui_page_component_key: 0,
			currentPage: 1,
			pageSize: 6,
			total: 0,
			imageDialogVisible: false,
			enlargedImageUrl: '',
			options: [
				{
					value: 0,
					label: '宝宝照片',
				},
				{
					value: 1,
					label: '学习照片',
				},
				{
					value: 2,
					label: '风景照片',
				},
				{
					value: 3,
					label: '美女照片',
				},
				{
					value: 99,
					label: '其他照片',
				},
			],
			picType: 0,
		}
	},
	created() {
		// 调用请求数据的方法
		this.queryPic()
	},
	methods: {
		showImageDialog(url) {
			this.enlargedImageUrl = url
			this.imageDialogVisible = true
		},
		async queryPic() {
			this.loading = true
			const { data: res } = await axios.get('http://120.79.36.53:8888/picInfo/page', {
				params: {
					page: this.currentPage,
					pageSize: this.pageSize,
					picType: this.picType,
				},
			})
			if (res.code === 200) {
				this.picList = res.result.records
				this.total = res.result.total
			}
			this.loading = false
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage
			this.queryPic()
		},
	},
}
</script>

<style lang="less" scoped>
.el-header {
	background-color: #b3c0d1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	color: #333;
}

.pagination {
	margin-top: 16px;
	text-align: right;
}
</style>