本组件是基于 elementplus ui 二次封装，必须在原有项目中全局引用 elementplus ui 情况下使用

多功能表格使用方法

import { HwTablePlus, HwFormPlus, MultiplePlayer } from 'hw-common-module'

<hw-table-plus :total="total" :tableData="list" :tableConfig="tableConfig" :loading="loading" :page="tableData.page" :columns="columns" @handleEdit="handleEdit" @handleDelete="handleDelete" @handlePaginationChange="handleSizeChange" >

columns table 配置项

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | | :-------- | ------------------ | ------- | ---------------------- | ---------------------: | | index | 是否显示序号 | Boolean | - | - | | size | 尺寸 | String | large / default /small | small | | align | 排列方式 | String | left / center / right | center | | stripe | 是否为斑马纹 table | Boolean | true | - | | select | 是否显示选择栏 | Number | 0 | 0 不显示 1 单选 2 多选 | | dbCopy | 双击复制 | Boolean | false | - | | dbEdit | 双击编辑 | Boolean | false | - | | fixed | 固定表头 | Boolean | - | - | | border | 边框 | Boolean | - | - | | height | 高度 | String | - | - | | lazy | 数据懒加载 | Boolean | - | - | | lazy | 数据懒加载 | Boolean | - | - | | pageSizes | 每页显示数量 | Array | - | - |

tableConfig table 列表内容

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | | :------- | ---------------- | -------------- | ---------- | -----: | | align | table 列居中方式 | String | - | - | | label | 列名称 | String | - | - | | value | 对应字段名称 | String | - | - | | width | 列宽度 | String | - | - | | overflow | 省略显示 | Boolean | - | - | | methods | 操作事件 | Array | - | - | | sortable | 排序 | Boolean | false | - | | slot | html 脚本 | String | - | - | | fixed | 固定列 | Boolean/String | left/right | - |

slot 自定义 插槽

table 分页组件 其他配置

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | | :--------- | ---------- | ------- | ---------------------------- | -----: | | pagination | 分页器 | Boolean | - | true | | total | 分页总数 | String | - | - | | tableData | table 数据 | Array | - | - | | loading | 加载状态 | String | - | - | | page | 分页值 | String | pageIndex 页码 pageSize 数量 | - |

methods 操作按键配置项

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | | :----- | ---------- | ------ | ------------ | -----: | | label | 按键名称 | String | 参照按键配置 | - | | size | 尺寸 | String | 参照按键配置 | - | | type | 类型 | String | 参照按键配置 | - | | value | 事件回调值 | String | - | - |

回调事件

| 方法名 | 说明 | 参数 | 备注 | | :--------------------- | -------------- | ---- | ----------------------------------------------: | | handleEdit | 自定义事件名称 | row | 必须与 methods - value 值相符，否则无法执行回调 | | handleDelete | 自定义事件名称 | row | 同上 | | handlePaginationChange | 分页回调 | size | 分页回调事件 |

HwFormPlus 表单组件

| 属性名 | 说明 | 类型 | 默认值 | | :--------- | ------------ | ------ | -----: | | formItems | 行内表单配置 | Array | [] | | formRules | 表单数据对象 | Object | {} | | formSize | 表单尺寸 | String | - | | formConfig | 表单配置 | Object | - |

formConfig 配置

| 属性名 | 说明 | 类型 | 默认值 | | :------- | -------- | ------ | ------: | | width | 标签长度 | String | 120 | | type | 表单类型 | String | - | | size | 表单尺寸 | String | default | | position | 位置 | String | right |

formItems 配置

| 属性名 | 说明 | 类型 | 默认值 | | :------ | ---------- | ------ | -----: | | element | 组件名称 | String | - | | label | 标签名称 | String | - | | name | model 健名 | String | - |

config 通用组件配置

| 属性名 | 说明 | 类型 | 默认值 | | :---------- | --------------------------------------- | ------- | -----: | | clearable | 清空按键 | Boolean | - | | placeholder | 占位内容 | String | - | | rules | 表单验证 | Object | {} | | …… | 支持 elementplus Ui form 表单各组件属性 | All | - |

选择器组件

| 属性名 | 说明 | 类型 | 默认值 | | :------ | ---------- | ----- | -----: | | options | 选择器内容 | Array | - |

时间、日期选择器组件

| 属性名 | 说明 | 类型 | 默认值 | | :------ | -------------- | ------- | -----------------------------: | | format | 时间日期格式化 | String | YYYY-MM-DD/YYYY-MM-DD HH:mm:ss | | size | 尺寸 | String | - | | default | 禁用 | Boolean | false |

计数器组件

| 属性名 | 说明 | 类型 | 默认值 | | :----- | ------------------ | ------ | -----: | | min | 计数器允许的最小值 | Number | - | | max | 计数器允许的最大值 | Number | - |

开关组件

| 属性名 | 说明 | 类型 | 默认值 | | :----------- | ----------------------- | ------ | -----: | | activeText | switch 打开时的文字描述 | string | - | | inactiveText | switch off 时的文字描述 | string | - |

upload config 配置

| 属性名 | 说明 | 类型 | 默认值 | | :------- | ---------------- | ------- | -----: | | type | 上传文件类型 | string | - | | size | 文件大小 | Number | - | | bastUrl | 上传文件地址 | string | - | | tip | 上传文件提示内容 | string | - | | limit | 文件数量 | Number | - | | multiple | 是否多选 | Boolean | - | | format | 文件列表链接 key | string | - | | method | api 请求格式 | string | - | | fileList | 已上传文件列表 | Array | - |

upload 事件回调

| 属性名 | 说明 | 回调参数 | | :--------------------- | -------------------------------------------------------------- | -------: | | executedUploadPreview | 点击文件列表中已上传的文件时的钩子 | - | | executedUploadChange | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | - | | executedUploadRemove | 文件列表移除文件时的钩子 | - | | executedUploadExceed | 当超出限制时，执行的钩子函数 | - | | executedUploadProgress | 文件上传时的钩子 | - | | executedUploadSuccess | 文件上传成功时的钩子 | - | | executedUploadError | 文件上传失败时的钩子 | - | | executedBeforeUpload | 上传文件之前的钩子 | - | | executedBeforeRemove | 删除文件之前的钩子 | - |

image config 图片预览 组件配置

| 属性名 | 说明 | 类型 | 默认值 | | :--------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------: | | src | 图片源地址 | String | - | | fit | 确定图片如何适应容器框 | String | cover 可选值 contain 居中 cover 拉伸 fill 平铺 none 无效果 scale-down 与 none 或 contain 中的一个相同 | | min | 最小缩放比例 | Number | 0.2 | | max | 最大缩放比例 | Number | 7 | | index | 索引 | Number | 0 | | details | 预览图详情插槽 srcList length >= 0 时生效 | String | index 可选值 index name slot/自定义 | | clickModal | 点击遮罩关闭组件 | Boolean | false | | lazy | 图片懒加载 | Boolean | false | | alt | alt | String | - | | fileList | 预览图数组 | Object | [] | | infinite | 无限循环预览 | Boolean | false | | closeESC | 是否可以通过按下 ESC 关闭 Image | Boolean | true | | imgStol | 预览图自定义内容 前提 details 为 stol | String | - | | format | 图片列表 地址中 key 值 | String | url |

image 图片预览 回调函数

| 属性名 | 说明 | 回调参数 | | :---------------- | -------------------- | -------: | | executedImgLoad | 图片加载成功触发 | - | | executedImgError | 图片加载失败触发 | - | | executedImgSwitch | 切换图像时触发 | index | | executedImgClose | 关闭预览图时触发 | - | | executedImgShow | 当 Viewer 显示时触发 | - |

HwVideoPlus 视频控件组件

| 属性名 | 说明 | 类型 | 默认值 | | :---------------- | ------------------------------ | ---------------- | ----------------------: | | id | event | object | multiple_player | | url | 视频链接 | string | - | | total | 视频源画面总数 | number | 1 | | index | 画面序列号 | number | 1 | | audios | 音频链接 | object | - | | layout | 组件布局，子组件名用逗号分隔 | string | next,audio,zomm,magnify | | autoplay | 是否自动切换 | boolean | false | | interval | 自动切换的时间间隔，单位为毫秒 | number | 3000 | | rateSize 播放速度 | object | [1,1.25,1.5,2,3] | | lazy | 是否使用懒加载 | boolean | false | | background | 是否为按钮添加背景色 | string #fff | | flexType | 画面排列方式 | number | 2 （1:1x2+1 2:2x3） | | autoWidth | 按宽度自适应 | boolean | true | | autoHeight | 按高度自适应 | boolean | false | | pixelScale | 像素比例 | object | [1920,1080] | | videoMuted | 视频音频状态 | true |

HwVideoPlus 全局参数

| 属性名 | 说明 | 默认值 | | :------------ | ------------------------ | ------------------: | | currentTime | 视频时长/秒 | - | | videoTime | 视频时长/格式化-时分秒 | - | | portion | 视频时长与总视频长度标准 | - | | clientWidth | 容器宽度 | 100% | | clientHeight | 容器高度 | clientWidth * 16/9 | | videoStatus | 视频播放状态 | false | | audioStatus | 声音状态 | false | | magnifyStatus | 放大状态 | false | | fullStatus | 全屏状态 | false | | coordinates | dom 盒子模型 | - | | rateNum | 当前倍数 | 1 | | audioIndex | 当前播放音频 | 0 |

HwVideoPlus 组件使用方法

const dom = new MultiplePlayer({ id:'multiple_player', url:'you video url', audios:['audio','audio'] })