# 列表页场景（Vue 3）

## 结构

```
w-page-header（可选）
└ w-form 查询区（label-position="right"，w-row :gutter="16"）
└ w-space 工具栏
└ w-table（border）或 w-table-v2（大数据）
└ w-pagination
```

## 查询区

```vue
<script setup lang="ts">
import { reactive } from 'vue'

const query = reactive({ keyword: '', status: '' })
const search = () => {
  /* ... */
}
const reset = () => {
  Object.assign(query, { keyword: '', status: '' })
}
</script>

<template>
  <w-form :model="query" label-position="right">
    <w-row :gutter="16">
      <w-col :span="6">
        <w-form-item label="关键词">
          <w-input v-model="query.keyword" placeholder="请输入" clearable />
        </w-form-item>
      </w-col>
      <w-col :span="6">
        <w-form-item>
          <w-button type="primary" @click="search">查询</w-button>
          <w-button @click="reset">重置</w-button>
        </w-form-item>
      </w-col>
    </w-row>
  </w-form>
</template>
```

## 表格 + 分页

```vue
<w-table :data="list" row-key="id" border>
  <w-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
  <w-table-column label="操作" width="140" fixed="right">
    <template #default="{ row }">
      <w-button link type="primary" @click="edit(row)">编辑</w-button>
      <w-popconfirm title="确定删除？" @confirm="remove(row)">
        <template #reference>
          <w-button link type="danger">删除</w-button>
        </template>
      </w-popconfirm>
    </template>
  </w-table-column>
</w-table>

<w-pagination
  v-model:current-page="page"
  :total="total"
  layout="total, prev, pager, next"
/>
```

视觉规则见 [design-patterns/table.md](../design-patterns/table.md)、[design-patterns/form.md](../design-patterns/form.md)。
