@composy/pivot-table-vue

LDesign 数据透视表 Vue 3 适配包 — 基于 @composy/pivot-table-core 核心库的 Vue 组合式 API。

安装

npm install @composy/pivot-table-vue

需要同时安装 @composy/pivot-table-core 作为依赖。

快速开始

组件用法

<template>
  <PivotTable
    :data="data"
    :rows="['region']"
    :cols="['product']"
    :values="[{ field: 'sales', aggregator: 'sum' }]"
    theme="light"
    :show-row-totals="true"
    :sortable="true"
    @cell-click="onCellClick"
  />
</template>

<script setup lang="ts">
import { PivotTable } from '@composy/pivot-table-vue'

const data = [
  { region: 'East', product: 'Phone', sales: 1000 },
  { region: 'East', product: 'Laptop', sales: 2000 },
  { region: 'West', product: 'Phone', sales: 800 },
]

function onCellClick(cell) {
  console.log('Clicked:', cell)
}
</script>

Composable 用法

<template>
  <div ref="container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { usePivotTable } from '@composy/pivot-table-vue'

const container = ref<HTMLElement | null>(null)
const { create, result, setSort, setTheme, refresh, destroy } = usePivotTable()

onMounted(() => {
  if (container.value) {
    create(container.value, {
      data: [...],
      rows: ['region'],
      cols: ['product'],
      values: [{ field: 'sales', aggregator: 'sum' }],
    })
  }
})
</script>

Plugin 注册

import { PivotTablePlugin } from '@composy/pivot-table-vue'

app.use(PivotTablePlugin)
// 现在可以全局使用 <PivotTable />

Props

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | data | Record<string, unknown>[] | - | 数据源 | | rows | (string \| FieldConfig)[] | - | 行字段 | | cols | (string \| FieldConfig)[] | - | 列字段 | | values | (string \| ValueFieldConfig)[] | - | 值字段 | | aggregator | AggregatorType | 'sum' | 默认聚合类型 | | theme | 'light' \| 'dark' \| 'auto' | 'light' | 主题模式 | | showRowTotals | boolean | true | 显示行合计 | | showColTotals | boolean | true | 显示列合计 | | sortable | boolean | false | 启用排序 | | sort | SortConfig | - | 排序配置 | | filters | FilterConfig[] | - | 过滤配置 | | striped | boolean | true | 斑马纹 | | loading | boolean | false | 加载状态 | | emptyText | string | 'No data' | 空态文本 | | valueFormatter | (value: number \| null) => string | - | 全局值格式化 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | cell-click | CellClickInfo | 单元格点击 | | cell-hover | CellHoverInfo | 单元格悬停 | | cell-hover-end | - | 悬停离开 | | sort | SortConfig | 排序变化 |

Expose

组件实例暴露以下方法：

instance、result、setData、setTheme、setSort、setFilters、setLoading、refresh

构建产物

| 目录 | 格式 | 入口 | |------|------|------| | dist/ | UMD | dist/index.js / dist/index.min.js | | es/ | ESM | es/index.js | | esm/ | ESM | esm/index.js | | lib/ | CJS | lib/index.cjs |

验证命令

pnpm run type-check    # 类型检查
pnpm run build         # 构建
pnpm run lint:check    # Lint 检查