47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
---
|
|
name: arco-vue-table-patterns
|
|
description: "Arco Design Vue 表格模式。用于 `a-table`、列配置、数据源、行选择、分页、远程加载、插槽、排序和筛选。"
|
|
user-invocable: false
|
|
---
|
|
|
|
# 表格模式
|
|
|
|
完整表格 API 参考 [table.md](../components/data-display/table.md)。
|
|
|
|
## 基础表格
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const columns = [
|
|
{ title: '名称', dataIndex: 'name' },
|
|
{ title: '状态', dataIndex: 'status', slotName: 'status' },
|
|
{ title: '操作', slotName: 'actions' },
|
|
];
|
|
|
|
const data = [
|
|
{ key: '1', name: '任务 A', status: 'running' },
|
|
{ key: '2', name: '任务 B', status: 'done' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<a-table :columns="columns" :data="data" row-key="key">
|
|
<template #status="{ record }">
|
|
<a-tag :color="record.status === 'done' ? 'green' : 'blue'">
|
|
{{ record.status }}
|
|
</a-tag>
|
|
</template>
|
|
<template #actions="{ record }">
|
|
<a-button type="text" size="small">查看 {{ record.name }}</a-button>
|
|
</template>
|
|
</a-table>
|
|
</template>
|
|
```
|
|
|
|
## 远程数据
|
|
|
|
- 将分页、筛选、排序状态放在本地响应式状态中。
|
|
- 用一个请求函数统一拉取数据，在 `onMounted` 和表格变更事件中复用。
|
|
- 请求中给表格设置加载状态，避免重复操作和空白反馈。
|
|
- 不要在每次渲染时重新创建列配置；列应定义一次，或由稳定输入计算得到。
|