index.vue 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <div class="app-container">
  3. demo 组件引用,接口调用
  4. <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
  5. <el-table-column align="center" label="ID" width="95">
  6. <template slot-scope="scope">
  7. {{ scope.$index }}
  8. </template>
  9. </el-table-column>
  10. <el-table-column label="Title">
  11. <template slot-scope="scope">
  12. {{ scope.row.title }}
  13. </template>
  14. </el-table-column>
  15. <el-table-column label="Author" width="180" align="center">
  16. <template slot-scope="scope">
  17. <span>{{ scope.row.author }}</span>
  18. </template>
  19. </el-table-column>
  20. <el-table-column label="Pageviews" width="110" align="center">
  21. <template slot-scope="scope">
  22. {{ scope.row.pageviews }}
  23. </template>
  24. </el-table-column>
  25. <el-table-column class-name="status-col" label="Status" width="110" align="center">
  26. <template slot-scope="scope">
  27. <el-tag :type="scope.row.status | statusFilter">
  28. {{ scope.row.status }}
  29. </el-tag>
  30. </template>
  31. </el-table-column>
  32. <el-table-column align="center" prop="created_at" label="Created at" width="250">
  33. <template slot-scope="scope">
  34. <i class="el-icon-time" />
  35. <span>{{ scope.row.timestamp | parseTime }}</span>
  36. </template>
  37. </el-table-column>
  38. </el-table>
  39. </div>
  40. </template>
  41. <script lang="ts">
  42. import { Component, Vue } from "vue-property-decorator";
  43. import { getArticles } from "@/api/articles";
  44. import { IArticleData } from "@/api/types";
  45. @Component({
  46. name: "Table",
  47. filters: {
  48. statusFilter: (status: string) => {
  49. const statusMap: { [key: string]: string } = {
  50. published: "success",
  51. draft: "gray",
  52. deleted: "danger",
  53. };
  54. return statusMap[status];
  55. },
  56. parseTime: (timestamp: string) => {
  57. return new Date(timestamp).toISOString();
  58. },
  59. },
  60. })
  61. export default class extends Vue {
  62. private list: IArticleData[] = [];
  63. private listLoading = true;
  64. private listQuery = {
  65. page: 1,
  66. limit: 20,
  67. };
  68. created() {
  69. this.getList();
  70. }
  71. private async getList() {
  72. this.listLoading = true;
  73. const { data } = await getArticles(this.listQuery);
  74. this.list = data.items;
  75. // Just to simulate the time of the request
  76. setTimeout(() => {
  77. this.listLoading = false;
  78. }, 0.5 * 1000);
  79. }
  80. }
  81. </script>