# QyqTable 数据表格

> QyqTable 基于 Element Plus 展示后台列表数据，支持列配置、状态映射、斑马纹和分页，提供 Vue 3 使用示例与参数说明。

原始页面：[QyqTable 数据表格](http://docs.quyongqing.cn/components/qyq-table.html)

## 说明

用于列表数据展示的表格组件，适合组件清单、订单列表、配置列表等后台页面场景。

## 实时预览

当前文档页保留一组固定预览，直接展示常见表格列表样式。

如果业务场景需要分页、按钮列或更多操作，可以继续通过 \`columns\` 和外部数据请求逻辑扩展。

## 源码位置

`src/components/qyq-table/index.vue`

## 基本参数

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `data` | `array` | `[]` | 表格数据源。 |
| `columns` | `array` | `[]` | 列配置数组。 |
| `loading` | `boolean` | `false` | 加载状态。 |
| `border` | `boolean` | `false` | 是否显示边框。 |
| `stripe` | `boolean` | `false` | 是否显示斑马纹。 |
| `size` | `string` | `default` | 表格尺寸。 |
| `showPagination` | `boolean` | `true` | 是否显示分页。 |
| `currentPage` | `number` | `1` | 当前页码。 |
| `pageSize` | `number` | `10` | 每页条数。 |
| `total` | `number` | `0` | 总条数。 |

## 基本使用方法

```vue
<template>
  <QyqTable
    :data="rows"
    :columns="columns"
    :border="true"
    :stripe="true"
    :show-pagination="false"
  />
</template>

<script setup lang="ts">
import QyqTable from '@/components/qyq-table/index.vue'

const rows = [
  { id: 'cmp-001', name: 'Snow Effect', status: 1 },
  { id: 'cmp-002', name: 'Qyq Table', status: 1 },
]

const columns = [
  { prop: 'id', label: '组件编码' },
  { prop: 'name', label: '组件名称' },
  { prop: 'status', label: '状态', codeMap: { 0: '开发中', 1: '可用' } },
]
</script>
```

## 代码示例

**Qyq Table 基础示例**

```vue
<template>
  <QyqTable
    :data="rows"
    :columns="columns"
    :border="true"
    :stripe="true"
    :show-pagination="false"
  />
</template>

<script setup lang="ts">
import QyqTable from '@/components/qyq-table/index.vue'

const rows = [
  { id: 'cmp-001', name: 'Snow Effect', status: 1 },
  { id: 'cmp-002', name: 'Qyq Table', status: 1 },
]

const columns = [
  { prop: 'id', label: '组件编码' },
  { prop: 'name', label: '组件名称' },
  { prop: 'status', label: '状态', codeMap: { 0: '开发中', 1: '可用' } },
]
</script>
```