Ant Design Vue 4常用组件

<template>
  <a-config-provider
      :theme="{
      token: {
        colorPrimary: '#FA7E31',
      },
    }"
  >
    <RouterView/>
  </a-config-provider>
</template>

<a-space size="middle">
    <a-button type="primary">搜索</a-button>
    <a-button>重置</a-button>
</a-space>

<a-space direction="vertical"></a-space>

<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>

<a-card style="margin: 0.8rem">
</a-card>

<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>

const activeKey = ref('1');

<a-table :dataSource="dataSource" :columns="columns"/>

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号',
  }
])