# 组件文档
系统使用到的相关组件
# 基础框架组件
vue-element-admin (opens new window)
# 树形选择组件
vue-treeselect (opens new window)
# 富文本编辑器
# 表格分页组件
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| total | Number | 空 | 总条目数 |
| page | Number | 1 | 初始化加载页数 |
| limit | Number | 20 | 每页的记录行数 |
| pageSizes | Array | [10, 20, 30, 50] | 可供选择的每页的行数 |
| pagerCount | Number | 5 | 设置最大页码按钮数 |
| layout | String | total, sizes, prev, pager, next, jumper | 组件布局，子组件名用逗号分隔 |
| background | Boolean | true | 是否为分页按钮添加背景色 |
| autoScroll | Boolean | true | 自动滚动到顶部 |
| hidden | Boolean | false | 是否显示分页 |
# 富文本组件
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | String | 空 | 编辑器的内容 |
| height | Number | Null | 编辑器的高度 |
| minHeight | Number | Null | 最小高度 |
| readOnly | Boolean | false | 是否只读 |
| fileSize | Number | 5 | 上传文件大小限制(MB) |
| type | String | url | 图片保存类型（base64编码、url地址） |
# 工具栏右侧组件
right-toolbar (opens new window)
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| showSearch | Boolean | true | 是否显示检索条件 |
| columns | Array | 空 | 显隐列信息 |
| search | Boolean | true | 是否显示检索图标 |
| showColumnsType | String | checkbox | 显隐列类型（transfer穿梭框、checkbox复选框） |
| gutter | Number | 10 | 右外边距 |
| storageKey | String | 空 | 列显隐状态记忆的 localStorage key |
# 图片上传组件
image-upload (opens new window)
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | String, Array | 空 | 图片上传的值 |
| action | String | /common/upload | 上传接口地址 |
| data | Object | 空 | 上传携带的参数 |
| limit | Number | 5 | 图片数量限制 |
| fileSize | Number | 5 | 大小限制(MB) |
| fileType | Array | ["doc", "xls", "ppt", "txt", "pdf"] | 文件类型, 例如['png', 'jpg', 'jpeg'] |
| isShowTip | Boolean | true | 是否显示提示信息 |
| disabled | Boolean | false | 禁用组件（仅查看图片） |
| drag | Boolean | true | 拖动排序 |
# 图片预览组件
image-preview (opens new window)
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| src | String | 空 | 预览地址 |
| width | Number, String | 空 | 预览宽度 |
| height | Number, String | 空 | 预览高度 |
# 文件上传组件
file-upload (opens new window)
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | String, Array | 空 | 文件上传的值 |
| action | String | /common/upload | 上传接口地址 |
| data | Object | 空 | 上传携带的参数 |
| limit | Number | 5 | 上传数量限制 |
| fileSize | Number | 5 | 大小限制(MB) |
| fileType | Array | ["doc", "xls", "ppt", "txt", "pdf"] | 文件类型, 例如['xls', 'doc', 'pdf'] |
| isShowTip | Boolean | true | 是否显示提示信息 |
| disabled | Boolean | false | 禁用组件（仅查看文件） |
| drag | Boolean | true | 拖动排序 |
# 表单设计组件
form-generator (opens new window)
# 数据字典组件
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | Array | null | 字典数据 |
| value | Number, String, Array | 空 | 当前的值 |
| showValue | Boolean | true | 是否未找到匹配的数据时，显示原始value |
| separator | String | , | 分隔符 |
# 树分割面板组件
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| treeData | Array | [] | 树形数据，必须是以对象为元素的数组 |
| title | String | '树形结构' | 侧边栏标题 |
| titleIconClass | String | 'el-icon-office-building' | 标题图标类名，使用 Element UI 的图标类 |
| showSearch | Boolean | true | 是否显示搜索框 |
| searchPlaceholder | String | '请输入名称' | 搜索框占位符文本 |
| defaultCollapsed | Boolean | false | 是否默认收起侧边栏 |
| treeProps | Object | { children: "children", label: "label" } | 树形组件配置项，包括子节点字段、标签字段等 |
| nodeKey | String | 'id' | 节点唯一标识字段名 |
| expandOnClickNode | Boolean | false | 是否在点击节点时展开或收起 |
| showCheckbox | Boolean | false | 是否显示复选框（多选功能） |
| checkStrictly | Boolean | false | 是否严格的遵循父子不互相关联（复选框多选时） |
| defaultExpandAll | Boolean | false | 是否默认展开所有节点 |
| defaultExpandedKeys | Array | [] | 默认展开的节点的 key 数组 |
| defaultWidth | Number | 220 | 侧边栏默认宽度（像素） |
| collapsedWidth | Number | 20 | 侧边栏收起时的宽度（像素） |
| minWidth | Number | 180 | 侧边栏最小宽度限制（像素） |
| maxWidth | Number | 400 | 侧边栏最大宽度限制（像素） |
| storageKey | String | 'tree-sidebar-width' | 本地存储的宽度 key |
| enableStorage | Boolean | true | 是否启用本地存储宽度 |
| filterMethod | Function | null | 自定义过滤方法，接收 (value, data) 参数 |
# 导入Excel数据组件
excel-import-dialog (opens new window)
| 参数 | 类型 | 默认值 | 必传 | 描述 |
|---|---|---|---|---|
| title | String | '数据导入' | 否 | 对话框标题 |
| width | String | '400px' | 否 | 对话框宽度 |
| action | String | - | 是 | 上传接口地址 |
| templateAction | String | '' | 否 | 模板下载接口地址，不传则不显示下载模板链接 |
| templateFileName | String | 'template' | 否 | 模板文件名 |
| updateSupportLabel | String | '是否更新已经存在的数据' | 否 | 覆盖更新勾选框的说明文字 |