<template>
|
<el-card style="width: 100%" v-if="reset">
|
<div style="width: 100%">
|
<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="../../assets/img/dataedit/imgslt.jpg"
|
/>
|
<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-time"></i>{{ item.createtime }}</span>
|
</div>
|
<div>
|
<div style="display: inline-block; margin-top: 8px">
|
<el-checkbox
|
v-model="item.isChecked"
|
@change="(checked) => handleSelectChange(checked, item)"
|
>
|
</el-checkbox>
|
</div>
|
<div style="display: inline-block; float: right">
|
<el-button type="text" @click="showMeteData(item)"
|
>查看元数据</el-button
|
>
|
<el-button type="text" @click="downloadData(item)"
|
>下载</el-button
|
><el-button type="text" @click="deleteData(item)"
|
>删除</el-button
|
>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-card>
|
</template>
|
<script>
|
export default {
|
props: ["data", "refresh", "total"],
|
data() {
|
return {
|
listdata: {},
|
//v-if根据它重新实例化组件
|
reset: this.refresh,
|
//获取已选中的数据
|
selectedIds: [],
|
//获取已选中的数据
|
selectListData: [],
|
};
|
},
|
watch: {},
|
methods: {
|
handleSelectChange(checked, _item) {
|
if (checked === true) {
|
if (this.selectedIds.indexOf(_item.id) === -1) {
|
this.selectedIds.push(_item.id);
|
this.selectListData.push(_item);
|
}
|
} else {
|
if (this.selectedIds.indexOf(_item.id) > -1) {
|
this.selectedIds.forEach((obj, index, arr) => {
|
if (obj == _item.id) {
|
arr.splice(index, 1);
|
}
|
});
|
this.selectListData.forEach((obj, index, arr) => {
|
if (obj.id == _item.id) {
|
arr.splice(index, 1);
|
}
|
});
|
}
|
}
|
// let _that = this;
|
// let out = [];
|
// this.data.forEach((obj) => {
|
// if (_that.selectedIds.indexOf(obj.id) > -1) out.push(obj);
|
// });
|
// this.selectListData = out;
|
},
|
showMeteData(_item) {
|
//与父组件功能类似，直接调用
|
this.$emit("showMeteData", _item);
|
},
|
downloadData(_item) {
|
this.$emit("downloadData", _item);
|
},
|
deleteData(_item) {
|
this.$emit("deleteData", _item);
|
},
|
},
|
computed: {
|
// 子组件computed中定义内容
|
tabledata() {
|
this.data.forEach((obj) => {
|
obj.isChecked = this.selectedIds.indexOf(obj.id) > -1;
|
});
|
return this.data;
|
},
|
},
|
};
|
</script>
|
