vue-custome-components
vue-custome-components插件描述
插件基于UI库 element-plus, @element-plus/icons-vue, 前端框架：vue3 来开发，插件主要包含一些日常常用的组件封装（table组件，动态表单组件...）.
如何使用
- 按需导入:
import 'vue-custome-components/dist/style.css'
import { VueCustomeTable } from 'vue-custome-components'
- 全局注册:在项目的 main.ts 中进行如下的全局安装
import VueCustomeComponents from 'vue-custome-components'
import 'vue-custome-components/dist/style.css'
app.use(VueCustomeComponents)
全局 注册后，在任意子组件中就可以直接使用对应的插件功能
部分组件参数配置
VueCustomeTable:
table属性配置：
| 属性名 | 是否必需 | 属性描述 | 参数类型 | 默认值 |
|---|---|---|---|---|
| columns | 是 | 表格数据展示列配置 | Array | [] |
| data | 是 | 表格数据展示 | Array | [] |
| loading | 否 | 用于表格获取数据加载显示 | boolean | false |
| loading-text | 否 | 加载文字显示 | string | 加载中... |
| operation-column | 否 | 操作列配置 | Array | -- |
| stripe | 否 | 是否为斑马纹 | boolean | false |
| border | 否 | 表格是否带有边框 | boolean | false |
| show-overflow-tooltip | 否 | 内容溢出tip提示 | boolean | false |
| index | 否 | 是否显示序号列 | boolean | false |
| selected | 否 | 是否启动表格的选择 | boolean | false |
| rowKey | 否 | 行唯一key值 | string | 'id' |
| page | 否 | 分页配置(配置了启动内部分页组件) | Page | undefined |
Page数据配置：
| 属性名 | 说明 | 类型 | 是否必配 |
|---|---|---|---|
| currentPage | 当前页 | number | 是 |
| pageSize | 当前页大小 | number | 是 |
| total | 总页数 | number | 是 |
| pageSizes | 页面显示条数配置 | [number] | 否 |
table事件：
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| size-change | 启动内部分页组件,页面size大小发生变化时触发的事件 | size |
| current-change | 启动内部分页组件,页面page发生变化时触发的事件 | page |
| fliter-change | 表头筛选时触发的事件 | filters |
| handle-operation | 操作列表中的操作触发的事件 | type(操作类型), data |
| sort-change | 表头排序触发 的事件 | sort |
| selection-change | 表格checkbox触发的事件 | data |
table方法：
| 方法名 | 说明 | 参数 |
|---|---|---|
| toggleRowSelection | 用于表格数据回显 | data |
| getSelectionRows | selected为true,获取表格选中的数据 | -- |
columns数据配置：
| 属性名 | 属性描述 | 属性类型 | 是否必需 |
|---|---|---|---|
| label | 列名称 | string | 是 |
| prop | 列字段属性(与接口返回的数据字段保持一致) | string | 是 |
| fixed | 列是否固定 | string / boolean | 否 |
| width | 列字宽度 | string / number | 否 |
| formatter | 自定义格式化内容 | (row: any) => any | 否 |
| component | 自定义组件展示 | (date: any) => Component | 否 |
| sort | 是否启动排序 | boolean | 否 |
| search | 列表是否启动筛选功能 | SearchType | 否 |
| align | 列表对齐方式 | string | 否 |
| children | 用于多级表头显示 | [column] | 否 |
SearchType查询配置：
| 属性名 | 属性描述 | 类型 | 是否必需 |
|---|---|---|---|
| type | 筛选类型 | input, select, remoteSelect, date,datetime,datetimerange,daterange | 是 |
| multiple | remoteSelect是否是多选 | boolean | 否 |
| maxLength | input 类型限制输入字符 | number | 否（默认60） |
| minLimit | （data,datatime,datarange,datatimerange）用于最小值限制，值可以是符合日期格式的string，也可以是列表中的某一个字段 | any | 否 |
| maxLimit | （data,datatime,datarange,datatimerange）用于最大值限制，值可以是符合日期格式的string，也可以是列表中的某一个字段 | any | 否 |
| remoteApi | remoteSelect远程检索提供的api函数 | (val: string) => Promise | 否 |
operation-column配置：
| 属性名 | 属性描述 | 属性类型 | 是否必需 |
|---|---|---|---|
| label | 列名称 | string | 是 |
| fixed | 列是否固定 | string / boolean | 否 |
| width | 列字宽度 | string / number | 否 |
| btns | 操作项配置 | [Btn] | 否 |
Btn配置：
| 属性名 | 属性描述 | 是否必需 |
|---|---|---|
| label | 列名称 | 是 |
| icon | 图标：结合element-plus图标使用 | 否 |
| type | 操作类型 | 是 |
| style | 风格参考el-button type风格 | 否 |
表格含有自定义插槽：
| 插槽名 | 插槽描述 |
|---|---|
| empty | 数据为空显示插槽 |
| operations | 操作列插槽 |
VueCustomeForm:
form属性配置：
| 属性名 | 是否必需 | 属性描述 | 参数类型 | 默认值 |
|---|---|---|---|---|
| fields | 是 | 动态生成表单元数据 | [field] | [] |
| labelWidth | 否 | 标签的长度 | string/number | 120 |
| labelPosition | 否 | 标签对齐方式 | string | right |
| disabled | 否 | 表单是否禁用 | boolean | false |
| loading | 否 | 用于控制组件外部操作防止多次点击(启动内部操作按钮) | boolean | false |
field属性配置：
| 属性名 | 是否必需 | 属性描述 | 参数类型 |
|---|---|---|---|
| type | 是 | 表单元素类型 | "input", "select","remoteSelect" , "radio" , "checkbox" , "switch" , "date" ,"datetime" , "datetimerange" , "daterange" , "textarea" ,"component" |
| prop | 是 | 表单元素属性 | string |
| label | 是 | 属性名称 | string |
| col | 否 | el-col布局 | number |
| options | 否 | 用于select下拉选项 | [{label:xxx,value:xxx}] |
| disabled | 否 | 是否禁用状态 | boolean |
| multiple | 否 | select多选 | boolean |
| multipleLimit | 否 | 多选个数限制 | number |
| dateMinLimit | 否 | 用于最小值限制（data,datatime,datarange,datatimerange），值可以是符合日期格式的string，也可以是表单中的某一个字段 | any |
| dateMaxLimit | 否 | 用于最大值限制（data,datatime,datarange,datatimerange） | any |
| showWordLimit | 否 | 显示字符限制 | boolean |
| maxLength | 否 | 文本或者文本输入类型 类型限制输入字符 | number |
| prefixIcon | 否 | 前缀图标 | string/Component |
| suffixIcon | 否 | 后缀图标 | string/Component |
| autosize | 否 | textarea 高度是否自适应 | boolean/ { minRows: number,maxRows: number,} |
| activeValue | 否 | switch打开值 | string/boolean/number |
| inactiveValue | 否 | switch关闭值 | string/boolean/number |
| activeText | 否 | switch打开文案 | string/boolean/number |
| inactiveText | 否 | switch关闭文案 | string/boolean/number |
| rules | 否 | 表单验证 | element-plus表单验证规则 |
| showPassword | 否 | 是否显示 密码框 | boolean |
| remoteApi | 否 | 用于 select远程检索 | (val: string, fromData: FormData) => Promise |
| comp | 否 | 自定义表单组件：type: component使用，自定义组件必须实现v-modal功能,定义 fields：接受相关配置信息 | Component |
| linkageDisabled | 否 | 表单联动禁用(以表单中其他字段为限定值) | (fromData: FormData) => boolean |
| linkageRequired | 否 | 表单联动非必填(以表单中其他字段为限定值) | (fromData: FormData) => boolean |
| linkageFillOrClear | 否 | 当前配置数据变化，自动填充或者清空其他数据 | (fromData: FormData) => void |
| linkageOptions | 否 | 联动optons一般用于联动的级联选项 | (fromData: FormData) => Array |
表单事件：
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| submit | 启动内部操作按钮，提交校验成功后触发 | formData |
表单方法：
| 方法名 | 说明 | 参数 |
|---|---|---|
| validateForm | 用于表格验证 | callback验证成功的回调函数（可选参数），回调函数同时接受formData数据;返回值（Promise |
| resetForm | 表单重置功能 | -- |
| getFormData | 获取表单数据 | -- |
| displayData | 表格数据回显 | -- |
表单含有自定义插槽：
| 插槽名 | 插槽描述 |
|---|---|
| btnGroups | 自定义操作按钮插槽 |
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.11 | ^3.4.23 | ||
| 1.0.10 | ^3.4.23 | ||
| 1.0.9 | ^3.4.23 | ||
| 1.0.8 | ^3.4.23 | ||
| 1.0.7 | ^3.3.8 | ||
| 1.0.6 | ^3.3.8 | ||
| 1.0.3 | ^3.3.8 | ||
| 1.0.2 | ^3.3.8 | ||
| 1.0.1 | ^3.3.8 | ||
| 1.0.0 | ^3.3.8 |