@liexx/table

@liexx/table

基于 Vue 3 + Element Plus 的增强型表格组件，使用 TypeScript + Vite 构建。

安装

npm install @liexx/table element-plus
# 或
pnpm add @liexx/table element-plus

element-plus 为 peer dependency，需一并安装。

快速开始

全局注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import ProTablePlugin from '@liexx/table'
import '@liexx/table/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(ProTablePlugin)
app.mount('#app')

按需引入

<script setup lang="ts">
import { ProTable } from '@liexx/table'
import type { TableColumn } from '@liexx/table'
</script>

ProTable 高级表格

基于 Element Plus 的增强型数据表格，集成分页、搜索筛选、CRUD 表单弹窗、跨页选择、字典加载等功能。

基础用法

<template>
  <ProTable :columns="columns" :api="api" />
</template>

<script setup lang="ts">
import { ProTable } from '@liexx/table'
import type { TableColumn } from '@liexx/table'

const columns: TableColumn[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', type: 'input' },
  { prop: 'status', label: '状态', type: 'select', options: [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 }
  ]},
  { prop: 'createTime', label: '创建时间', type: 'date' }
]

const api = (params) => fetch('/api/list', { body: params })
</script>

带搜索栏

<template>
  <ProTable :columns="columns" :filters="filters" :api="api" />
</template>

<script setup lang="ts">
import type { TableColumn, TableFilter } from '@liexx/table'

const filters: TableFilter[] = [
  { prop: 'keyword', label: '关键词', type: 'input', span: 6 },
  { prop: 'status', label: '状态', type: 'select', options: [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 }
  ], span: 6 }
]
</script>

内置增删改

<template>
  <ProTable
    :columns="columns"
    :api="{ refresh, create, update, delete }"
    form-title="用户"
  />
</template>

<script setup lang="ts">
const refresh = (params) => getUserList(params)
const create = (data) => createUser(data)
const update = (data) => updateUser(data)
const delete = (row) => deleteUser(row.id)
</script>

自定义操作按钮

<template>
  <ProTable :columns="columns" :api="api" :actions="actions" />
</template>

<script setup lang="ts">
import type { TableActions } from '@liexx/table'

const actions: TableActions = [
  {
    key: 'export',
    title: '导出',
    isHeader: true,
    type: 'success',
    click: () => handleExport()
  },
  'create',
  {
    key: 'view',
    title: '查看',
    type: 'info',
    event: (row) => handleView(row)
  }
]
</script>

Props

TableColumn 列配置

TableFilter 搜索栏配置

Events

Slots

方法 (Ref)

导出类型

export type {
  ProTableProps,      // 组件 Props
  TableColumn,        // 列配置
  TableColumns,       // 列配置数组
  TableFilter,        // 搜索栏配置
  TableAction,        // 操作按钮
  TableActions,       // 操作按钮数组
  TableActionData,    // 操作按钮详细配置
  TableApis,          // API 配置对象
  TableApi,           // API 函数
  ApiResponse         // API 返回格式
} from '@liexx/table'

开发

# 安装依赖
pnpm install

# 本地调试（默认端口 4399）
pnpm dev

# 运行测试
pnpm test

# 代码检查
pnpm lint

# 构建产物
pnpm build

License

MIT