12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <div class="app-container">
- demo 组件引用,接口调用
- <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="Title">
- <template slot-scope="scope">
- {{ scope.row.title }}
- </template>
- </el-table-column>
- <el-table-column label="Author" width="180" align="center">
- <template slot-scope="scope">
- <span>{{ scope.row.author }}</span>
- </template>
- </el-table-column>
- <el-table-column label="Pageviews" width="110" align="center">
- <template slot-scope="scope">
- {{ scope.row.pageviews }}
- </template>
- </el-table-column>
- <el-table-column class-name="status-col" label="Status" 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="Created at" width="250">
- <template slot-scope="scope">
- <i class="el-icon-time" />
- <span>{{ scope.row.timestamp | parseTime }}</span>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
- <script lang="ts">
- import { Component, Vue } from "vue-property-decorator";
- import { getArticles } from "@/api/articles";
- import { IArticleData } from "@/api/types";
- @Component({
- name: "Table",
- filters: {
- statusFilter: (status: string) => {
- const statusMap: { [key: string]: string } = {
- published: "success",
- draft: "gray",
- deleted: "danger",
- };
- return statusMap[status];
- },
- parseTime: (timestamp: string) => {
- return new Date(timestamp).toISOString();
- },
- },
- })
- export default class extends Vue {
- private list: IArticleData[] = [];
- private listLoading = true;
- private listQuery = {
- page: 1,
- limit: 20,
- };
- created() {
- this.getList();
- }
- private async getList() {
- this.listLoading = true;
- const { data } = await getArticles(this.listQuery);
- this.list = data.items;
- // Just to simulate the time of the request
- setTimeout(() => {
- this.listLoading = false;
- }, 0.5 * 1000);
- }
- }
- </script>
|