QyqTable 数据表格

说明

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

实时预览

undefined

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

如果业务场景需要分页、按钮列或更多操作，可以继续通过 `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	总条数。

基本使用方法

<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 基础示例点击展开

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