代码拉取完成,页面将自动刷新
列表页由3部分组成:
博客列表主要使用表格组件: 表格 Table
<template>
<div>
<!-- 页头 -->
<a-breadcrumb>
<a-breadcrumb-item>文章管理</a-breadcrumb-item>
<a-breadcrumb-item>文章列表</a-breadcrumb-item>
</a-breadcrumb>
<!-- 表格的操作区 -->
<div class="operate">
<div>
<a-button size="small" type="primary">
<template #icon>
<icon-plus />
</template>
新建
</a-button>
</div>
<div class="search">
<a-input-search
:style="{ width: '320px' }"
placeholder="输入文章标题进行搜索"
/>
</div>
</div>
<!-- 表格内容区 -->
<div class="table">
<a-table :data="data">
<template #columns>
<a-table-column title="标题" data-index="name"></a-table-column>
<a-table-column title="作者" data-index="salary"></a-table-column>
<a-table-column title="概要" data-index="address"></a-table-column>
<a-table-column title="状态" data-index="email"></a-table-column>
<a-table-column title="操作" align="center">
<template #cell="{ record }">
<a-space>
<a-button
size="small"
status="danger"
@click="$modal.info({ title: 'Name', content: record.name })"
>删除
</a-button>
<a-button
size="small"
type="primary"
@click="$modal.info({ title: 'Name', content: record.name })"
>编辑
</a-button>
<a-button
size="small"
type="primary"
@click="$modal.info({ title: 'Name', content: record.name })"
>发布
</a-button>
<a-button
size="small"
type="primary"
@click="$modal.info({ title: 'Name', content: record.name })"
>查看
</a-button>
</a-space>
</template>
</a-table-column>
</template>
</a-table>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
const data = reactive([
{
key: "1",
name: "Jane Doe",
salary: 23000,
address: "32 Park Road, London",
email: "jane.doe@example.com",
},
{
key: "2",
name: "Alisa Ross",
salary: 25000,
address: "35 Park Road, London",
email: "alisa.ross@example.com",
},
{
key: "3",
name: "Kevin Sandra",
salary: 22000,
address: "31 Park Road, London",
email: "kevin.sandra@example.com",
},
{
key: "4",
name: "Ed Hellen",
salary: 17000,
address: "42 Park Road, London",
email: "ed.hellen@example.com",
},
{
key: "5",
name: "William Smith",
salary: 27000,
address: "62 Park Road, London",
email: "william.smith@example.com",
},
]);
</script>
<style scoped>
.operate {
display: flex;
margin: 8px 0 8px 0;
}
.search {
margin-left: auto;
}
.table {
width: 100%;
}
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。