50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
||
<div style="padding: 24px">
|
||
<a-typography-title :level="3" style="margin: 0 0 12px 0">
|
||
Ant Design Vue Demo（front-process）
|
||
</a-typography-title>
|
||
|
||
<a-alert
|
||
message="该页面由 front-system 通过 Wujie 挂载展示"
|
||
type="success"
|
||
show-icon
|
||
style="margin-bottom: 16px"
|
||
/>
|
||
|
||
<a-space>
|
||
<a-button type="primary" @click="onClick">AntD 按钮</a-button>
|
||
<a-tag color="blue">Vue3 + Vite</a-tag>
|
||
<a-tag color="green">Ant Design Vue</a-tag>
|
||
</a-space>
|
||
|
||
<a-divider />
|
||
|
||
<a-card title="示例表格" :bordered="false">
|
||
<a-table :columns="columns" :data-source="data" :pagination="false" row-key="id" />
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { TableColumnsType } from 'ant-design-vue';
|
||
import { message } from 'ant-design-vue';
|
||
|
||
type Row = { id: number; name: string; status: string };
|
||
|
||
const columns: TableColumnsType<Row> = [
|
||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||
{ title: '名称', dataIndex: 'name', key: 'name' },
|
||
{ title: '状态', dataIndex: 'status', key: 'status', width: 120 }
|
||
];
|
||
|
||
const data: Row[] = [
|
||
{ id: 1, name: '流程A', status: '启用' },
|
||
{ id: 2, name: '流程B', status: '停用' }
|
||
];
|
||
|
||
function onClick() {
|
||
message.success('Ant Design Vue 组件工作正常');
|
||
}
|
||
</script>
|
||
|