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