从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十五之显示全部文章（第一页）

本节学习目标

掌握element-plus表格el-table和el-table-column的用法。

新增文章数据类型

新增getArticles接口

修改AllArticles.vue

<template>
  <div class="main-body">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="slug" label="ID" width="240" :showOverflowTooltip="true" />
      <el-table-column prop="title" label="标题" width="240" :showOverflowTooltip="true" />
      <el-table-column prop="createdAt" label="发布时间" width="240">
        <template #default="scope">
          <i class="el-icon-time"></i>
          <span>{{ getSimpleDate(new Date(scope.row.createdAt)) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="author.username" label="作者" />
      <el-table-column label="标签" align="center" prop="tagList">
        <template #default="scope">
          <el-tag class="a_tag" v-for="tag in scope.row.tagList">
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getArticles } from '@/api';
import type { Article, ArticleSearchParams } from '@/types';

let tableData = ref<Article[]>([])

const fetchArticles = async () => {

  const params: ArticleSearchParams =  {
      'offset': 0,
      'limit': 10
  };

  try {
    const res = await getArticles(params);
    tableData.value = res.data.articles;
  } catch (error) {
    
  }
};

//中国标准时间转换为标准时间
const getSimpleDate = (date: Date) => {
  let y = date.getFullYear();
  let m: number | string = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  let d: number | string = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  let h = date.getHours();
  let minute: number | string = date.getMinutes();
  minute = minute < 10 ? ('0' + minute) : minute;
  let s: number | string = date.getSeconds();
  s = s < 10 ? '0' + s : s;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
}


fetchArticles();

</script>


<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  float: right
}

.a_tag {
  margin: 0 3px;
}
</style>

测试验证