0.0.6 • Published 8 months ago
el-pro-suite
本仓库基于element-plus进行封装，封装了表格、分页、表单、弹窗、抽屉等常用组件。
安装
npm install el-pro-suite
使用
全局注册
import ElProSuite from 'el-pro-suite'
app.use(ElProSuite)
按需引入
import {ElProTable} from 'el-pro-suite'
组件
el-pro-table
el-pro-table 属性参考：
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|
| table-data | 表格数据 | array | [] | 否 |
| get-list-api | 获取列表数据的接口定义 | function | - | 否 | ` |
| get-list-fn | 获取表格数据的方法，优先级高于getListApi | function | - | 否 |
| column-data | 列 | [] | — | 是 |
| params-to-json | 查询列表时，若有多选的查询条件为数组的情况，则将数组转为json字符串|boolean|false` | 否 |
| params-to-string | 查询列表时，若有多选的查询条件为数组的情况，则将数组拼接为逗号分隔的字符串|boolean|false` | 否 |
| update-list-on-mounted | mounted生命周期是否更新列表 | boolean | — | 否 |
| query-props | 查询列表时携带的参数 | object | false | 否 |
| span-method | 合并行的计算方法，参数为 | function | - | 否 |
| show-page | 是否显示分页 | boolean | true | 否 |
| hide-page-when-single | 当数据总页数为1时，是否隐藏分页 | boolean | false | 否 |
| total | 数据总条数 | number | 0 | 否 |
| default-page-size | 每页条数 | number | 10 | 否 |
| table-border | 表格边框 | boolean | true | 否 |
| index-accum | 序号是否翻页累加 | boolean | false | 否 |
| is-sort | 是否支持排序 | boolean | false | 否 |
| default-sort | 默认排序方式 | object | {prop:"",order: ""} | 否 |
| cell-class-name | 表格单元格的class名 | function/string | - | 否 |
| row-class-name | 表格行的class名 | function/string | - | 否 |
| align | 表格对齐方式 | string | left | 否 |
| header-align | 表头对齐方式 | string | left | 否 |
| empty-text | 空数据时显示的文本 | string | 暂无数据 | 否 |
| height | 表格高度，当表格内容超过设置高度后，内容区域会出现滚动条 | string/ number | - | 否 |
| max-height | 表格最大高度，当表格内容超过设置最大高度后，内容区域会出现滚动条 | string / number | - | 否 |
| show-summary | 是否显示合计行 | boolean | false | 否 |
| get-summaries | 合计行的计算方法 | function / object | - | 否 |
| summary-unit | 合计行的单位 | string | - | 否 |
| loading | 表格加载状态 | boolean | false | 否 |
| update-list-on-mounted | 是否在mounted生命周期更新列表 | boolean | false | 否 |
| row-Key | 行的key值，用于判断数据是否唯一 | string | dib-uuid | 否 |
| expand-row-keys | 展开行的key值 | array | - | 否 |
| front-paging | 前端分页,为true时，table-data中传入所有的数据，否则，table-data中传入当前页的数据 | boolean | false | 否 |
column-item 属性参考：
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|
| label | 列名 | string | - | 是 |
| prop | 当前列的数据属性名 | string | - | 是 |
| width | 列宽 | string | 'auto' | 否 |
| minWidth | 最小列宽 | string | - | 否 |
| formatter | 格式化列数据 | function | - | 否 |
| filter | 用来处理单元格内容，类似于过滤器,只能返回字符串或者数字,推荐使用formatter | function | - | 否 |
| show-overflow-tooltip | 是否显示超出宽度的文本省略号 | boolean | true | 否 |
| autoColor | 自动判断单元格颜色，正红负绿 | boolean | false | 否 |
| sortable | 是否支持排序：true、false、 custom | boolean, string | false | 否 |
| type | 列类型: index、seleciton | string | - | 否 |
| fixed | 是否固定列，可选值：left、right、none | string | none | 否 |
| header-component | 表头组件 | object | - | 否 |
| header-tooltip | 表头提示 | string | - | 否 |
| redKey | 用于判断红色列的属性名称，rowredKey为true时，该列显示红色 | string | - | 否 |
| greenKey | 用于判断绿色列的属性名称，rowgreenKey为true时，该列显示绿色 | string | - | 否 |
| hidden | 该列是否显示 | boolean | true | 否 |
| children | 用于设置多级表头 | column-item[] | [] | 否 |
| headerAlign | 用于设置表头居中方式 | left, center, right | left | 否 |
el-pro-table 事件
支持所有的el-table事件,以下事件仅是一部分
| 名称 | 说明 |
|---|
| tableDataChange | 表格数据发生变化 |
| sortTable | 排序切换 |
| pageSizeChange | 每页条数变化 |
| pageIndexChange | 页码切换 |
| headerDragend | 拖拽表头 |
el-pro-table API
| 名称 | 说明 |
|---|
| refresh | 重置为第一页，并刷新列表 |
| updateList | 刷新当前页 |
| setPageIndex | 设置当前页 |
| openSettingDrawer | 打开列设置抽屉,两个参数，第一个为是否允许拖拽排序（默认允许），第二个为是否显示固定列配置（默认显示） |
el-pro-form
el-pro-form属性
| 属性名 | 说明 | 类型 | 默认值 | 是否必选 |
|---|
| model-value | 绑定值 | object | - | 是 |
| column-data | 表单项定义 | array | [] | 否 |
| label-width | 表单label宽度 | number | 68 | 否 |
| content-width | 表单子项宽度 | number | 208 | 否 |
| search-on-enter | 回车触发查询 | boolean | false | 否 |
| search-on-change | 表单内容变化触发查询 | boolean | false | 否 |
| submit-btn | 是否显示提交按钮 | boolean | true | 否 |
| submit-text | 提交按钮文本 | string | 查询 | 否 |
| empty-btn | 是否显示清空按钮 | boolean | true | 否 |
| empty-text | 清空按钮文本 | string | 重置 | 否 |
| export-btn | 是否显示导出按钮 | boolean | true | 否 |
| export-text | 导出按钮文本 | string | 导出 | 否 |
| export-api | 导出接口 | function | - | 否 |
| export-fn | 导出函数 | function | - | 否 |
| table-component | 表格组件,用来关联表格，触发表格刷新 | object | - | 否 |
| submit-on-mounted | 是否在mounted时触发查询 | boolean | false | 否 |
| extra-params | 额外参数 | object | {} | 否 |
| params-to-json | 若有多选的查询条件为数组的情况，则将数组转为json字符串 | boolean | false | 否 |
| params-to-string | 若有多选的查询条件为数组的情况，则将数组转为逗号分隔的字符串 | boolean | false | 否 |
form-item属性
| 属性名 | 说明 | 类型 | 默认值 | 是否必选 |
|---|
| label | 表单项label | string | - | 否 |
| prop | 表单项绑定值的属性名 | string | - | 是 |
| show | 是否显示 | boolean/function | true | 否 |
| type | 表单项类型 | input/select/date/daterange/monthrange/cascade/autocomplete/custom | input | 是 |
| disabled | 是否禁用 | boolean | false | 否 |
| readonly | 是否只读 | boolean | false | 否 |
| clearable | 是否可清除 | boolean | true | 否 |
| placeholder | 占位符 | string | - | 否 |
| content-width | 表单项宽度, 若不指定则取search-form的content-width | number | - | 否 |
| get-dic-fn | 获取字典函数,用于select、cascade，返回一个数组，优先级高于get-dic-api | function | - | 否 |
| get-dic-api | 获取字典接口定有 | function | - | 否 |
| props | select、cascade组件的props | object | {label: "label",value: "value", children: "children",disabled: "disabled",res: "",search: "key" | 否 |
| multiple | 是否多选 | boolean | false | 否 |
| collapse-tags | 是否折叠多选 | boolean | true | 否 |
| collapse-tags-tooltip | 是否折叠多选时显示tooltip | boolean | true | 否 |
| shortcuts | 快捷选项，用于date和daterange | array | - | 否 |
| disabled-date | 禁用日期，用于date和daterange | function | 默认不做限制 | 否 |
| after-tody-disabled | 今后日期是否禁用 | boolean | false | 否 |
| remote | 是否远程搜索 | boolean | false | 否 |
| update-dic-on-expand | 是否在展开时更新字典 | boolean | false | 否 |
| component | 表单项组件,与type配合，当type为custom时，可以自定义组件 | object | - | 否 |
| search-on-enter | 是否在enter时触发查询 | boolean | false | 否 |
| search-on-change | 是否在change时触发查询 | boolean | false | 否 |
| show-all-levels | 是否显示所有级联选项 | boolean | true | 否 |
| show-all-value-levels | 是否在绑定值value中显示所有级联选项的value | boolean | true | 否 |
| group | 分组名称,拥有相同group的item将会组合在一起 | string | - | 否 |
事件
| 事件名称 | 说明 |
|---|
| export | 点击导出按钮 |
| submit | 点击"搜索"/"确认"按钮 |
| empty | 点击"清空"按钮 |
api
| 名称 | 说明 |
|---|
| submit | 提交表单,触发查询事件 |
| empty | 清空表单, 重置事件 |
| currValue | 表单数据 |
| validator | 表单验证，返回一个promise对象 |
| getValue | 获取表单数据 |
el-pro-dialog
弹出框组件，基于el-dialog封装，支持el-dialog的所有属性，并且支持el-dialog的slot。
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| modelValue | 组件双向绑定的值，支持对象或布尔类型 | [Object, Boolean] as PropType<any> | ref(false) |
| title | 对话框标题内容 | String | '' |
| render | 自定义内容渲染组件 | Object as PropType<Component> | null |
| width | 对话框宽度，支持字符串（如"80%"）或数字（像素值） | [String, Number] | 500 |
| renderProps | 传递给渲染组件的附加属性 | Object | () => {} |
| headerSlot | 自定义头部插槽 | [Object, null] | null |
| extraSlot | 自定义额外操作区插槽 | [Object, null] | null |
| footerSlot | 自定义底部插槽 | [Object, null] | null |
| onConfirm | 点击确认按钮时的回调函数 | Function | () => {} |
| onCancel | 点击取消/关闭按钮时的回调函数 | Function | () => {} |
| fullscreen | 是否全屏显示对话框 | Boolean | false |
| showFullScreenButton | 是否显示全屏切换按钮 | Boolean | true |
| showFooter | 是否显示底部操作栏 | Boolean | true |
| beforeConfirm | 确认操作前的拦截钩子函数，可返回 Promise 进行异步验证 | Function | () => {} |
| beforeCancel | 取消操作前的拦截钩子函数 | Function | () => {} |
| eventListener | 通用事件监听器，默认输出日志 | Function | (e, value) => { console.log('eventListener', e, value) } |
| locale | 国际化语言配置，默认使用中文包（需确保 zhCn 已定义） | Object as PropType<{ name: string, el: TranslatePair }> | () => zhCn |
el-pro-drawer
该组件是一个封装的抽屉组件，用于在页面中显示一个临时的窗口，支持多种配置选项，如标题、内容、宽度、底部操作栏等。
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| modelValue | 控制抽屉显示/隐藏，支持对象或布尔类型（用于复杂状态场景） | [Object, Boolean] as PropType<any> | ref(false) |
| title | 抽屉标题文本内容 | String | '' |
| render | 自定义主体内容渲染组件 | Object as PropType<Component> | () => {} |
| size | 抽屉尺寸，支持字符串（如"60%"）或数字（像素值） | [String, Number] | 500 |
| renderProps | 传递给渲染组件的属性对象 | Object | () => {} |
| headerSlot | 自定义头部区域插槽 | [Object, null] | null |
| extraSlot | 自定义标题栏右侧扩展操作区插槽 | [Object, null] | null |
| footerSlot | 自定义底部操作栏插槽 | [Object, null] | null |
| onConfirm | 点击确认按钮时触发的回调函数 | Function | () => {} |
| onCancel | 点击取消/关闭按钮时触发的回调函数 | Function | () => {} |
| showFullScreenButton | 是否显示全屏切换按钮 | Boolean | true |
| showFooter | 是否显示底部操作栏 | Boolean | true |
| beforeConfirm | 确认前的拦截函数，可异步验证（需返回 Promise） | Function | () => {} |
| beforeCancel | 关闭前的拦截函数，可用于阻止关闭 | Function | () => {} |
| eventListener | 全局事件监听器（默认打印日志） | Function | (e, value) => { console.log('eventListener', e, value) } |
| locale | 国际化语言配置对象（需包含 name 和 el 属性） | Object as PropType<{name: string, el: TranslatePair}> | () => zhCn |
ElProDialogBox
该函数用来创建一个对话框组件，接收一个对象作为参数，包含以下属性：
| 参数名 | 说明 | 类型 | 默认值 |
|---|
| render | 自定义内容渲染组件 | object | 无，必填 |
| width | 组件宽度，支持数字或字符串形式 | number \| string | - |
| size | 同“width” | number \| string | - |
| renderProps | 传递给渲染组件的附加属性 | object | - |
| title | 组件标题内容 | string | - |
| extraSlot | 自定义额外操作区插槽 | object | - |
| beforeConfirm | 确认前的回调函数，接收数据并返回处理结果 | (data: any) => any | - |
| beforeCancel | 取消前的回调函数 | (data: any) => any | - |
| showFooter | 是否显示底部操作栏 | boolean | - |
| footerSlot | 自定义底部插槽 | object | - |
| headerSlot | 自定义头部插槽 | object | - |
| eventListener | 通用事件监听函数，接收事件类型和数据 | (type: string, data: any) => any | - |
| locale | 国际化语言配置 | object | - |
| directives | 自定义指令配置，支持单个或多个指令 | {name: string, value: object}[] \| {name: string, value: object} | - |
| use | 自定义注入内容或组件 | any | - |
| key: string | 其他任意自定义属性 | any | - |
ElProDrawerBox
该函数用来创建一个抽屉组件，接收一个对象作为参数，包含以下属性：
| 参数名 | 说明 | 类型 | 默认值 |
|---|
| render | 自定义内容渲染组件 | object | 无，必填 |
| width | 组件宽度，支持数字或字符串形式 | number \| string | - |
| size | 同“width” | number \| string | - |
| renderProps | 传递给渲染组件的附加属性 | object | - |
| title | 组件标题内容 | string | - |
| extraSlot | 自定义额外操作区插槽 | object | - |
| beforeConfirm | 确认前的回调函数，接收数据并返回处理结果 | (data: any) => any | - |
| beforeCancel | 取消前的回调函数 | (data: any) => any | - |
| showFooter | 是否显示底部操作栏 | boolean | - |
| footerSlot | 自定义底部插槽 | object | - |
| headerSlot | 自定义头部插槽 | object | - |
| eventListener | 通用事件监听函数，接收事件类型和数据 | (type: string, data: any) => any | - |
| locale | 国际化语言配置 | object | - |
| directives | 自定义指令配置，支持单个或多个指令 | {name: string, value: object}[] \| {name: string, value: object} | - |
| use | 自定义注入内容或组件 | any | - |
| key: string | 其他任意自定义属性 | any | - |
el-pro-svg-icon
用于动态渲染 SVG 图标或 CSS 字体图标的通用组件，图标依赖的js或者css文件需要提前引入。
属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| iconName | 必填 图标标识：- SVG 模式：symbolId（自动补全#前缀）- CSS 模式：iconfont 类名 | String | 必填 |
| className | 自定义样式类名 | String | "" |
| type | 图标渲染模式 | "svg" \| "css" as PropType<"svg"\|"css"> | "svg" |
| fill | 图标填充色（建议优先使用 style.color 替代） | String | "#666666" |
功能特性
1. 双模式渲染
<!-- SVG 图标模式（默认） -->
<Icon iconName="home" type="svg" />
<!-- CSS 字体图标模式 -->
<Icon iconName="icon-home" type="css" />
el-pro-echarts
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| option | echarts配置项 | Object | 必填 |
| renderer | 渲染方式 | 'canvas' \| 'svg' | "canvas" |
| notMerge | 是否不跟之前设置的option进行合并 | Boolean | false |
| loading | 是否显示加载动画 | Boolean | false |
| emptyText | 空数据提示文本 | String | "暂无数据" |
| loadingText | 加载中文本 | String | "" |
| showEmpty | 若数据为空，是否显示空数据提示 | Boolean | true |
exposes
| 属性名 | 说明 | 类型 |
|---|
| instance | echarts实例 | Object |
el-pro-fold-text
用于展示多行文本，可以折叠和展开。
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| label | 标签文本 | String | "" |
| value | 值 | String \| Array | "" |
| lineHeight | 行高 | Number | 22 |
| showRowNum | 显示行数 | Number | 1 |
| labelWidth | 标签宽度 | Number \| String | "auto" |
| labelColor | 标签颜色 | String | "inherit" |
| valueColor | 值颜色 | String | "inherit" |
| omit | 是否显示省略号 | Boolean | false |
| labelSplit | label分隔符，默认没有分隔符 | String | "" |
| emptyValue | 空值占位符 | String | "-" |