<template>
|
<div style="width: 100%" v-if="reset">
|
<el-row>
|
<el-col
|
style="width: 280px"
|
:span="4"
|
v-for="(item, index) in tabledata"
|
:key="index"
|
:offset="1"
|
>
|
<div style="margin-top: 15px">
|
<el-card :body-style="{ padding: '10px' }" shadow="hover">
|
<img style="width: 100%; display: block" :src="item.imgurl" />
|
<div>
|
<span><i class="el-icon-share"></i>{{ item.name }}</span>
|
</div>
|
<div>
|
<span><i class="el-icon-document"></i>{{ item.formate }}</span>
|
</div>
|
<div>
|
<span><i class="el-icon-news"></i>{{ item.version }}</span>
|
</div>
|
<div>
|
<span><i class="el-icon-user"></i>{{ item.user }}</span>
|
</div>
|
<div>
|
<span><i class="el-icon-time"></i>{{ item.createtime }}</span>
|
</div>
|
<div>
|
<div style="display: inline-block; margin-top: 8px">
|
<el-checkbox> </el-checkbox>
|
</div>
|
<div style="display: inline-block; float: right">
|
<el-button type="text" @click="showMeteData(item)"
|
>查看元数据</el-button
|
>
|
<el-button type="text" @click="deleteData(item)"
|
>删除</el-button
|
>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-col>
|
</el-row>
|
<div style="width: 100%; margin: 20px 0px; text-align: center">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="current_page"
|
:page-sizes="[4, 8, 12, 16]"
|
:page-size="pagesize"
|
layout="total, sizes, prev, pager, next"
|
:total="datatotal"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: ["data", "refresh", "total"],
|
data() {
|
return {
|
//循环卡片列表的数据源
|
currentPage: 1,
|
pagesize: 8,
|
listdata: {},
|
//v-if根据它重新实例化组件
|
reset: this.refresh,
|
};
|
},
|
watch: {
|
tabledata(val) {
|
this.$nextTick(function () {
|
this.reset = true;
|
});
|
},
|
},
|
methods: {
|
handleSizeChange(size) {
|
this.pagesize = size;
|
},
|
handleCurrentChange(currentPage) {
|
this.currentPage = currentPage;
|
},
|
showMeteData(_item) {
|
this.$emit("showMeteData", _item);
|
},
|
deleteData(_item) {
|
this.$emit("deleteData", _item);
|
},
|
},
|
computed: {
|
// 子组件computed中定义内容
|
tabledata() {
|
let start = (this.currentPage - 1) * this.pagesize;
|
let end = start + this.pagesize;
|
return this.data.slice(start, end);
|
},
|
datatotal() {
|
return this.total;
|
},
|
},
|
};
|
</script>
|
