h-business-ui

一个基于 Vue 3 和 Element Plus 的业务组件库，提供了一系列常用的业务组件，帮助开发者快速构建应用。

使用文档：使用文档

特性

• 🚀 基于 Vue 3 Composition API 开发
• 💎 使用 TypeScript 编写，提供完整的类型定义
• 🎨 基于 Element Plus 组件库封装
• 📦 开箱即用的业务组件
• 🔧 高度可配置，支持自定义
• 📚 完善的文档和示例

组件列表

QueryForm

查询表单组件，支持多种表单控件类型和灵活的配置。

• 支持输入框、选择器、日期选择器、级联选择器等控件
• 支持自定义表单控件属性
• 支持插槽定制
• 支持默认值设置
• 支持参数格式化
• 支持组件实例获取

QueryTable

查询表格组件，提供了丰富的表格功能和灵活的配置选项。

• 支持单选和多选模式
• 支持行点击选择
• 自动计算分页序号
• 支持字典数据格式化
• 丰富的插槽定制能力
• 完整的选中状态管理
• 支持数据回显功能

QueryPagination

分页组件，基于 Element Plus 分页组件封装。

• 支持自定义分页布局
• 支持自定义每页显示条数选项
• 提供丰富的方法用于控制分页状态

QueryFormTable

组合组件，集成了查询表单、数据表格和分页功能。

• 集成查询表单、数据表格和分页功能
• 支持自动加载数据
• 提供丰富的自定义配置选项
• 支持插槽定制操作按钮
• 完整的事件处理机制
• 支持数据格式化和回显

DialogCon

对话框组件，基于 Element Plus 对话框组件封装。

• 支持全屏切换
• 支持拖拽移动
• 支持加载状态
• 自定义头部和底部按钮
• 灵活的打开和关闭回调

DynamicForm

动态表单组件，支持动态渲染表单项。

• 支持多种表单控件类型
• 支持动态显示/隐藏表单项
• 支持动态禁用/启用表单项
• 支持自定义渲染函数
• 支持表单校验
• 支持重置和提交功能

安装

# 使用 npm
npm install h-business-ui

# 使用 yarn
yarn add h-business-ui

# 使用 pnpm
pnpm add h-business-ui

使用

全局注册

import { createApp } from 'vue'
import HBusinessCom from 'h-business-ui'
import 'h-business-ui/style.css'

const app = createApp()
app.use(HBusinessCom)

按需引入

<template>
  <QueryForm :columns="columns" @onSearch="handleSearch" />
</template>

<script setup lang="ts">
import { QueryForm } from 'h-business-ui'
</script>

Element Plus 按需导入配置

如果你的项目使用 Element Plus 按需导入，需要确保安装了 unplugin-vue-components 和 unplugin-auto-import 插件，并在 vite 或 webpack 中配置：

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

手动导入 Element Plus 样式

如果未使用自动导入插件，需要手动导入 Element Plus 样式：

import 'element-plus/dist/index.css'

示例

基础使用

<template>
  <QueryFormTable :formColumns="formColumns" :tableColumns="tableColumns" :api="fetchData" />
</template>

<script setup lang="ts">
import { QueryFormTable } from 'h-business-ui'

const formColumns = [
  {
    prop: 'name',
    label: '姓名',
    comType: 'input',
  },
]

const tableColumns = [
  {
    prop: 'name',
    label: '姓名',
  },
]

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

开发

安装依赖

pnpm install

构建项目

pnpm run build

类型检查

pnpm run type-check

浏览器支持

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

依赖

• Vue 3.5.0+
• Element Plus 2.13.6+
• @element-plus/icons-vue 2.3.2+

许可证

MIT

贡献

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

更新日志

1.0.0-beta.1 (2026-03-28)

新增

• ✨ 新增 QueryForm 组件
• ✨ 新增 QueryTable 组件
• ✨ 新增 QueryPagination 组件
• ✨ 新增 QueryFormTable 组件
• ✨ 新增 DialogCon 组件
• ✨ 新增 DynamicForm 组件

优化

• ⚡ 优化组件性能
• 📝 完善 TypeScript 类型定义
• 📚 完善组件文档

联系我们

如有问题或建议，请提交 Issue 或联系我们的开发团队。

致谢

感谢所有为本项目做出贡献的开发者！