ez-tables

ez-tables

基于 Vue 3 + Element Plus 的表格组件库，提供 Table、TableActionDropdown、TableQueryWrap 与 useTable。

安装

npm install ez-tables
# 或
pnpm add ez-tables

需同时安装 peer 依赖：

npm install vue element-plus @element-plus/icons-vue

使用

import { Table, TableActionDropdown, TableQueryWrap } from 'ez-tables'
import { useTable } from 'ez-tables/hooks'
import type { TableExpose, TableColumn } from 'ez-tables'
import 'element-plus/dist/index.css'

组件样式会随 ez-tables 自动注入，不必再写 import 'ez-tables/style.css'。

<template>
  <Table
    :columns="columns"
    :data="tableObject.tableList"
    :loading="tableObject.loading"
    :pagination="pagination"
    v-model:current-page="tableObject.currentPage"
    v-model:page-size="tableObject.pageSize"
    @register="register"
  >
    <template #action="{ row }">
      <TableActionDropdown
        :buttons="[
          { text: '编辑', type: 'primary', link: true, onClick: () => onEdit(row) },
          { text: '删除', type: 'danger', link: true, onClick: () => onDelete(row) }
        ]"
      />
    </template>
  </Table>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Table, TableActionDropdown, TableQueryWrap } from 'ez-tables'
import { useTable } from 'ez-tables/hooks'
import type { Pagination } from 'ez-tables'

const getListApi = async (option: { pageNo: number; pageSize: number }) => {
  const res = await fetchList(option)
  return { list: res.list, total: res.total }
}

const { register, tableObject, methods } = useTable({ getListApi })

const pagination = computed<Pagination>(() => ({
  total: tableObject.total
}))
</script>

useTable 的用法与原来 import { useTable } from '@/hooks/web/useTable' 对齐：返回 register、tableObject、methods / tableMethods。删除、导出文案会优先使用项目里的 $t；没有 i18n 时使用中文默认文案。导出 Excel 也可通过 downloadExcel 自行接管。

全局注册（可选）

import EzTables from 'ez-tables'

app.use(EzTables)

本地开发

# 进入包目录
cd ez-tables

# 启动 playground
pnpm dev

# 构建
pnpm build

发布

pnpm build
npm publish --access public