You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.0 KiB
80 lines
2.0 KiB
<template> |
|
<div class="app-container"> |
|
<el-table |
|
v-loading="listLoading" |
|
:data="list" |
|
element-loading-text="Loading" |
|
border |
|
fit |
|
highlight-current-row |
|
> |
|
<el-table-column align="center" label="ID" width="95"> |
|
<template slot-scope="scope"> |
|
{{ scope.$index }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="标题"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.title }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="昵称" width="110" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.author }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="时间" width="110" align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.pageviews }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column class-name="status-col" label="状态" width="110" align="center"> |
|
<template slot-scope="scope"> |
|
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" prop="created_at" label="操作" width="200"> |
|
<template slot-scope="scope"> |
|
<i class="el-icon-time" /> |
|
<span>{{ scope.row.display_time }}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
|
|
import { getList } from '@/api/table' |
|
|
|
export default { |
|
filters: { |
|
statusFilter(status) { |
|
const statusMap = { |
|
published: 'success', |
|
draft: 'gray', |
|
deleted: 'danger' |
|
} |
|
return statusMap[status] |
|
} |
|
}, |
|
data() { |
|
return { |
|
list: null, |
|
listLoading: true |
|
} |
|
}, |
|
created() { |
|
this.fetchData() |
|
}, |
|
methods: { |
|
fetchData() { |
|
this.listLoading = true |
|
getList().then(response => { |
|
this.list = response.data.items |
|
this.listLoading = false |
|
}) |
|
} |
|
} |
|
} |
|
</script>
|
|
|