# vue-custome-components

**Repository Path**: akaedu2012/vue-custome-components

## Basic Information

- **Project Name**: vue-custome-components
- **Description**: 插件主要包含一些日常常用的组件封装（table组件，动态表单组价...）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-02-18
- **Last Updated**: 2025-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-custome-components插件描述

插件基于UI库 <strong>element-plus</strong>, <strong>@element-plus/icons-vue</strong>, 前端框架：<strong>vue3</strong> 来开发，插件主要包含一些日常常用的组件封装（table组件，动态表单组件...）.

[更多线上案例](http://175.178.117.94/)

## 如何使用

- 按需导入: <br>
```js
      import 'vue-custome-components/dist/style.css'
      import { VueCustomeTable } from 'vue-custome-components'
```

- 全局注册:在项目的 main.ts 中进行如下的全局安装<br>
```js
      import VueCustomeComponents from 'vue-custome-components'
      import 'vue-custome-components/dist/style.css'
      app.use(VueCustomeComponents)
```
全局 注册后，在任意子组件中就可以直接使用对应的插件功能<br>

## 部分组件参数配置

### <strong>VueCustomeTable:</strong><br>
#### <strong>table属性配置：</strong>

| 属性名 |是否必需| 属性描述 | 参数类型 | 默认值 |
|----|----|----|----|----|
| 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 |

#### <strong>Page数据配置：</strong>
| 属性名 |说明| 类型 | 是否必配|
|----|----|----|----|
|currentPage|当前页| number|是|
|pageSize|当前页大小|number|是|
|total| 总页数|number|是|
|pageSizes|页面显示条数配置| [number]| 否|

#### <strong>table事件：</strong>

| 事件名 |说明| 回调参数 |
|----|----|----|
| size-change | 启动内部分页组件,页面size大小发生变化时触发的事件| size |
| current-change | 启动内部分页组件,页面page发生变化时触发的事件| page |
| fliter-change | 表头筛选时触发的事件 | filters |
| handle-operation | 操作列表中的操作触发的事件 |  type(操作类型), data |
| sort-change | 表头排序触发 的事件 | sort |
| selection-change | 表格checkbox触发的事件 | data |

#### <strong>table方法：</strong>

| 方法名 |说明| 参数 |
|----|----|----|
| toggleRowSelection | 用于表格数据回显 | data |
| getSelectionRows | selected为true,获取表格选中的数据| -- |

#### <strong>columns数据配置：</strong>

| 属性名 | 属性描述 |属性类型 | 是否必需|
|----|----|----|----|
| 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] | 否 |

#### <strong>SearchType查询配置：</strong>

| 属性名 | 属性描述 | 类型 | 是否必需|
|----|----|----|----|
| 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| 否 |

#### <strong> operation-column配置：</strong>
| 属性名 | 属性描述 |属性类型 | 是否必需|
|----|----|----|----|
| label| 列名称| string | 是 |
| fixed | 列是否固定 | string / boolean | 否 |
| width | 列字宽度 | string / number | 否 |
| btns | 操作项配置 | [Btn] | 否 |

<strong> Btn配置：</strong>
| 属性名 | 属性描述  | 是否必需|
|----|----|----|
| label| 列名称 | 是 |
| icon | 图标：结合element-plus图标使用  | 否 |
| type | 操作类型 | 是 |
| style | 风格参考el-button type风格 | 否 |

#### <strong> 表格含有自定义插槽：</strong>

| 插槽名 | 插槽描述  |
|----|----|
|empty|数据为空显示插槽|
|operations| 操作列插槽|

### <strong>VueCustomeForm:</strong><br>
#### <strong>form属性配置：</strong>

| 属性名 |是否必需| 属性描述 | 参数类型 | 默认值 |
|----|----|----|----|----|
| fields | 是| 动态生成表单元数据 | [field]| [] |
| labelWidth | 否| 标签的长度| string/number| 120|
| labelPosition| 否| 标签对齐方式| string| right|
|disabled| 否| 表单是否禁用| boolean| false|
|loading| 否| 用于控制组件外部操作防止多次点击(启动内部操作按钮)| boolean| false|

#### <strong>field属性配置：</strong>
| 属性名 |是否必需| 属性描述 | 参数类型 |
|----|----|----|----|
| 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<Option>|

#### <strong>表单事件：</strong>

| 事件名 |说明| 回调参数 |
|----|----|----|
| submit | 启动内部操作按钮，提交校验成功后触发 | formData|

#### <strong>表单方法：</strong>

| 方法名 |说明| 参数 |
|----|----|----|
| validateForm | 用于表格验证 | callback验证成功的回调函数（可选参数），回调函数同时接受formData数据;返回值（Promise<boolean>）是验证是否成功 |
| resetForm | 表单重置功能| -- |
| getFormData | 获取表单数据| -- |
| displayData | 表格数据回显| -- |

#### <strong> 表单含有自定义插槽：</strong>

| 插槽名 | 插槽描述  |
|----|----|
|btnGroups|自定义操作按钮插槽|