前言
https://www.antdv.com/docs/vue/getting-started-cn
主题配置
代码语言：javascript复制<template>
<a-config-provider
:theme="{
token: {
colorPrimary: '#FA7E31',
},
}"
>
<RouterView/>
</a-config-provider>
</template>间距
水平
代码语言：javascript复制<a-space size="middle">
<a-button type="primary">搜索</a-button>
<a-button>重置</a-button>
</a-space>垂直
代码语言：javascript复制<a-space direction="vertical"></a-space>Button
代码语言：javascript复制<a-space>
<a-button type="primary">搜索</a-button>
<a-button>重置</a-button>
<a-button type="dashed">虚线按钮</a-button>
<a-button type="text">文本按钮</a-button>
<a-button type="link" danger>删除</a-button>
<a-popconfirm title="确定要删除吗?" ok-text="Yes" cancel-text="No">
<a-button type="link" danger>删除</a-button>
</a-popconfirm>
</a-space>Card
代码语言：javascript复制<a-card style="margin: 0.8rem">
</a-card>Tab
代码语言：javascript复制<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="全部"></a-tab-pane>
<a-tab-pane key="2" tab="上架中"></a-tab-pane>
<a-tab-pane key="3" tab="审核中"></a-tab-pane>
</a-tabs>TS
代码语言：javascript复制const activeKey = ref('1');Table
代码语言：javascript复制<a-table :dataSource="dataSource" :columns="columns"/>TS
代码语言：javascript复制const columns = reactive([
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
])
const dataSource = reactive([
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}
])
