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|自定义操作按钮插槽|