qj-design

基于Element Plus二次开发的业务组件
5,322
vue3 element-plus vueuse qj-design
Install
npm install qj-design
Latest Version:0.0.35
Vue:3
License:ISC
Last Updated:Oct 12, 2026
Links: npm
Maintainer: dootexto

千嘉UI样式库，基于Element Plus

qj-layout 布局

# 介绍
1、qj-layout组件是整体布局组件,包含顶部导航栏、左侧菜单、右侧内容
2、需要引入useLayout方法，传递所需要的参数
3、qj-layout 插槽 tagsview
4、qj-layout 插槽 domain 域切换区域显示规则 插槽 > setActions

import { useLayout } from 'qj-design/components/layout/useLayout'
const { setToken, setMenus, setMenuIcons, setSiteInfo, setUserInfo,  setActions } = useLayout()

setToken: 设置token
setMenus: 设置菜单
setMenuIcons: 菜单图标
setSiteInfo: 设置网站信息{title,icon,log,CacheKey}
setUserInfo: 设置用户信息
setActions: 设置域相关接口 {userDomainAction, userDomainChangeAction} 获取用户当前域 | 设置当前域

QjDialog

Attributes

参数 类型 默认值 必填 说明
modelValue Boolean - 是 对话框显示状态

Events

事件名 说明 参数
update:modelValue 对话框状态变更时触发 (value: boolean) - 新的显示状态

Slots

名称 说明 作用域
header 自定义头部内容 -
content 自定义内容区域 setPageActions(data) - 设置底部按钮

QjDrawer

Attributes

参数 类型 默认值 必填 说明
modelValue Boolean - 是 抽屉显示状态
jump Boolean false 否 是否显示上一项/下一项按钮
buttons QjActionButtonProps[] [] 否 更多操作按钮列表
sizes number[] [500, 800] 否 宽度变化两级阶梯

Events

事件名 说明 参数
update:modelValue 抽屉状态变更时触发 (value: boolean) - 新的显示状态
jump-change 点击上一项/下一项时触发 ('prev' | 'next') - 切换方向

Slots

名称 说明 作用域
content 自定义内容区域 setPageActions(data) - 设置底部按钮

QjSvgIcon

### 介绍
1、qj-svg-icon 组件是图标组件，基于createSvgIconsPlugin，可以通过font-size设置大小，color设置颜色
2、需要把svg文件放入 src/common/assets/svgs
3、使用的时候传递name参数，为svg文件名

### 使用

<qj-svg-icon name="name" />

Attributes

参数 类型 默认值 必填 说明
prefix string icon 否 SVG图标前缀
name string - 是 SVG图标名称

QjTable

Attributes

参数 类型 默认值 必填 说明
data any[] [] 否 表格数据
tableColumn QjTableColumnTypes[] [] 否 列配置
pagination boolean true 否 是否显示分页
paginationLayout string 'total, sizes, prev, pager, next' 否 分页组件布局
paginationOption QjTablePaginationpagination {pageSize: 20, pageIndex: 1, total: 0} 否 分页参数
select boolean false 否 是否可选择
selectMode string single 否 选择模式：single-单选，multiple-多选
editField boolean false 否 是否显示字段编辑
sortable boolean false 否 是否排序

Events

事件名 说明 参数
select-change 选择项变化时触发 (selection: any[]) - 选中的行数据
item-click 点击表格行时触发 (row: any) - 点击的行数据
fieid-change 字段显示变化时触发 (labels: string[]) - 选中的字段标签
page-size-change 每页条数变化时触发 (val: number) - 新的每页条数
page-index-change 当前页码变化时触发 (val: number) - 新的页码

Slots

名称 说明 作用域
button 表格顶部按钮区域 -
pages 自定义分页区域 -
column 自定义列显示区域 column与[slot名称]互斥, column优先级高
[slot名称] 自定义列内容 {row, column, index} - 行数据、列配置、索引

Exposes

名称 说明
qjTableRef 表格实例引用

useTable hooks

Attributes

参数 类型 默认值 必填 说明
action Function () => {} 是 获取列表数据接口
deleteAction Function () => {} 否 删除接口
exportExcelAction Function () => {} 否 导出Excel接口
condition Object {} 否 搜索条件
needPagination boolean true 否 是否分页 是:传分页接口 否:传非分页接口
pagination Object {pageSize: 20, pageIndex: 1,} 否 分页参数

Exposes

名称 说明 参数
condition 搜索条件 -
paginationOption 分页参数 -
tableList 列表数据 -
getPage 获取列表数据 -
queryPage 刷新第一页 -
pageSizeChange 分页参数改变 -
pageIndexChange 分页参数改变 -
deleteItem 删除列表项 (param: any) - 删除参数：例{id: xxx},直接透传
exportExcel 导出Excel (name: any, callback: any) - 文件名和回调函数
tabelLoading 加载状态

QjTableBusiness

Attributes

参数 类型 默认值 必填 说明
action Function () => {} 否 获取列表数据接口
deleteAction Function () => {} 否 删除接口
exportExcelAction Function () => {} 否 导出Excel接口
condition Object {} 否 搜索条件
pagination boolean true 否 是否分页 是:传分页接口 否:传非分页接口
paginationOption Object {pageSize: 20, pageIndex: 1, total: 0} 否 分页参数

Events

事件名 说明 参数
response 接口返回的数据 -

Exposes

名称 说明 参数
getPage 获取列表数据 -
queryPage 刷新第一页 -
deleteItem 删除列表项 (param: any) - 删除参数：例{id: xxx},直接透传
exportExcel 导出Excel (name: any, callback: any) - 文件名和回调函数
qjTableRef

QjTableSearch

Attributes

参数 类型 默认值 必填 说明
form object - 是 表单数据对象
export boolean false 否 是否显示导出按钮
edit boolean true 否 是否显示编辑按钮
width number 260 否 表单每一项宽度
cache boolean false 否 是否缓存至localStorage
cacheKey string location.hash || location.pathname 否 缓存的key

Events

事件名 说明 参数
query 点击查询按钮时触发 -
reset 点击重置按钮时触发 -
export 点击导出按钮时触发 -
change 自定义搜索栏保存后触发 (formItemList: FormItem[]) - 表单项列表

Slots

名称 说明
default 表单项目（el-form-item）

Related Packages

@element-plus/nuxt

Element Plus module for Nuxt

830,141 176
element-plus nuxt
earthsdk-ui

基于 vue3、element-plus、earthsdk3 构建的 EarthSDK UI 组件库，提供丰富的 UI 组件...

11,530
element-plus earthsdk3
monose-component-vue

Vue3 ElementPlus 二次封装组件库

3,327
element-plus vue3
zb-ep

vue3 and element-plus components

2,744
element-plus vue3
slb_public_components

This is a Vue3 + ts + ELement-Plus pulic components.

1,804
element-plus vue

Version History

Version Released Vue License
0.0.35 ^3.5.24 ISC
0.0.34 ^3.5.24 ISC
0.0.33 ^3.5.24 ISC
0.0.32 ^3.5.24 ISC
0.0.31 ^3.5.24 ISC