62 lines
1.8 KiB
62 lines
1.8 KiB
4 weeks ago
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
||
|
|
<el-table-column width="80">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<img :src="getIcon(scope.$index)" alt="icon" style="width: 2.19rem; height: 1.25rem;">
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="name" width="300">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="date" width="100">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getAllMessagestwo } from '@/api/ManageApi/index';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MessageTable',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getData() {
|
||
|
|
const response = await getAllMessagestwo();
|
||
|
|
if (response && response.code === 200 && response.data) {
|
||
|
|
this.tableData = this.processData(response.data);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
processData(data) {
|
||
|
|
return data.map(item => ({
|
||
|
|
name: item.content,
|
||
|
|
date: this.formatDate(item.createTime)
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
getIcon(index) {
|
||
|
|
return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
|
||
|
|
},
|
||
|
|
formatDate(dateString) {
|
||
|
|
const date = new Date(dateString);
|
||
|
|
const year = date.getFullYear();
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
||
|
|
return `${year}-${month}-${day}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
width: 30rem;
|
||
|
|
height: 14.5rem;
|
||
|
|
}
|
||
|
|
</style>
|