查看“前端开发文档”的源代码

{{MARKDOWN}}
组件使用手册
============

布局 Layout
-----------

### base-container

外层容器。当子一级元素中包含base-section时，固定当前可视的base-section中的header和footer元素（base-section的子一级base-header、base-footer，以及base-main子一级的el-table（及其衍生组件）的表头和表尾行、el-pagination组件），直到页面滑动到其他section。

### base-section

分节容器。当外层元素为base-container时，固定当前可视节的头、尾类元素。

### base-header

分节头部元素的容器。将该组件置于base-container子一级的base-section中
时（base-container \> base-section \>
base-header），当前组件将在页面滚动到父级section区域时被固定到顶部。也可以通过设置inline-title属性为true的方式将其用作某一部分内容的小节标题。

属性：

| 属性名       | 说明                                                                                  | 类型    | 可选值     | 默认值 |
|--------------|---------------------------------------------------------------------------------------|---------|------------|--------|
| inline-title | 是否启用行内标题模式。如果该属性值为真，base-header元素是将表示为一个小节标题的形式。 | Boolean | true/false | false  |

### base-main

分节主体元素的容器。当将该组件置于base-container子一级的base-section中时（base-container
\> base-section \>
base-main），如果子一级元素中存在el-table及其衍生组件，固定表头到顶部并将表尾行固定到底部；如果子一级元素中存在el-pagination组件，将其固定到尾部。

### base-footer

分节尾部元素的容器。将该组件置于base-container子一级的base-section中
时（base-container \> base-section \>
base-footer），当前组件将在页面滚动到父级section区域时被固定到底部。

导航 Navigation
---------------

### base-navigator

左侧菜单导航器。

| 属性名 | 说明       | 类型  | 可选值 | 默认值 |
|--------|------------|-------|--------|--------|
| nodes  | 节点列表。 | Array | \-     | \-     |

### base-tabs

标签页组件。扩展自element-ui的组件el-tabs。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.\*）。

方法：

| 方法名 | 说明                                                                                                                                                 | 参数 |
|--------|------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| addTab | 新增标签页。接受参数为一个包含label、name、singleton、data属性的对象。此方法通过provide提供给子组件使用，子组件增加inject: ['addTab ']属性即可调用。 | tab  |

### base-tab-pane 

标签页组件。扩展自element-ui的组件el-tabs。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.\*）。

方法：

| 方法名   | 说明                                                                                                                                                       | 参数 |
|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| closeTab | 关闭当前标签页。接受参数为一个包含label、name、singleton、data属性的对象。此方法通过provide提供给子组件使用，子组件增加inject: ['closeTab ']属性即可调用。 | \-   |

事件：

| 事件名        | 说明                                                 | 参数 |
|---------------|------------------------------------------------------|------|
| tab-activated | 当前标签页被激活的事件，接收参数为当前tab页的tab属性 | tab  |

输入 Input
----------

### base-input-number

数字输入框。修改自element-ui的组件el-input-number。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.\*）。

属性：

| 属性名   | 说明                                                                                                                                                                                                                                           | 类型    | 可选值            | 默认值 |
|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|-------------------|--------|
| controls | 是否使用控制按钮。本组件仅修改默认值                                                                                                                                                                                                           | Boolean | true/false        | false  |
| type     | 非必须属性。当指定为amount时，输入框中的值将以带千分符的格式显示，并自动右对齐，amount模式下增加默认前缀人民币符（￥）；当指定为percent时，输入框中的值为百分比值，百分比模式下增加默认后缀百分号（%）。（例：输入15，显示15，实际数值为0.15） | String  | amount/percent    | \-     |
| readonly | 是否只读                                                                                                                                                                                                                                       | Boolean | true/false        | false  |
| align    | 文本对齐                                                                                                                                                                                                                                       | String  | left/center/right | left   |
| prefix   | 输入框前缀字符                                                                                                                                                                                                                                 | String  | \-                | \-     |
| suffix   | 输入框后缀字符                                                                                                                                                                                                                                 | String  | \-                | \-     |

slots:

| 名称    | 说明                                           |
|---------|------------------------------------------------|
| prefix  | 输入框前缀。如已指定prefix属性，该slot不生效。 |
| suffix  | 输入框后缀。如已指定suffix属性，该slot不生效。 |
| prepend | 输入框前置内容                                 |
| append  | 输入框后置内容                                 |

### base-date-picker

日期选择框。修改自element-ui的组件el-date-picker。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.\*）。

picker-options属性：

| 属性名              | 说明                                                                                                                        | 类型         | 可选值 | 默认值 |
|---------------------|-----------------------------------------------------------------------------------------------------------------------------|--------------|--------|--------|
| timeSelectableRange | 当日期时间选择框为date-time模式时，限定可选的时间范围。可为字符串（HH:mm:ss –HH:mm:ss），也可为字符串数组（字符串格式同上） | String/Array | \-     | \-     |

slots:

| 名称         | 说明                                     |
|--------------|------------------------------------------|
| date-content | 自定义设置日期面板上每个日期单元的内容。 |

弹出窗口 Dialogs
----------------

### base-approve-dialog

审批弹出框。用于审批操作的通用组件。

属性：

| 属性名             | 说明             | 类型   | 可选值 | 默认值 |
|--------------------|------------------|--------|--------|--------|
| operation-name     | 审批操作名称。   | String | \-     | 审批   |
| apv-result-options | 审批结果可选项。 | Array  | \-     | \-     |

方法：

| 方法名      | 说明                                              | 参数 |
|-------------|---------------------------------------------------|------|
| open        | 打开对话框。                                      | \-   |
| close       | 关闭对话框。                                      | \-   |
| stopLoading | 停止对话框的loading加载中状态，使审批按钮可点击。 | \-   |

事件：

| 事件名 | 说明                                                                                      | 参数 |
|--------|-------------------------------------------------------------------------------------------|------|
| save   | 保存审批结果。参数为包含审批结果的对象。apvResult选中的审批结果值，apvOpinion审批意见值。 | data |

### base-export-dialog

导出弹框。用于批量导出操作的通用组件。

属性：

| 属性名           | 说明                                     | 类型    | 可选值     | 默认值 |
|------------------|------------------------------------------|---------|------------|--------|
| file-suffix      | 导出文件后缀名。                         | String  | \-         | xlsx   |
| can-export-all   | 导出全部选项是否禁用。                   | Boolean | true/false | false  |
| template-options | 可选模板列表{templateId, templateName}。 | Array   | \-         | []     |

方法：

| 方法名      | 说明                                              | 参数 |
|-------------|---------------------------------------------------|------|
| open        | 打开对话框。                                      | \-   |
| close       | 关闭对话框。                                      | \-   |
| stopLoading | 停止对话框的loading加载中状态，使审批按钮可点击。 | \-   |

事件：

| 事件名      | 说明                                                  | 参数 |
|-------------|-------------------------------------------------------|------|
| export-data | 提交导出请求。{fileName, exportRange, exportTemplate} | data |

### base-import-dialog

导入弹框。用于批量导入操作的通用组件。

属性：

| 属性名        | 说明             | 类型    | 可选值     | 默认值 |
|---------------|------------------|---------|------------|--------|
| need-template | 是否需要下载模板 | Boolean | true/false | true   |

方法：

| 方法名 | 说明         | 参数 |
|--------|--------------|------|
| open   | 打开对话框。 | \-   |
| close  | 关闭对话框。 | \-   |

事件：

| 事件名            | 说明                                                                                   | 参数 |
|-------------------|----------------------------------------------------------------------------------------|------|
| download-template | 下载模板                                                                               | \-   |
| upload-success    | 上传成功，参数为包含上传结果result、响应response、当前文件file及文件列表fileList的对象 | data |
| upload-error      | 上传失败，参数为包含错误信息err、当前文件file及文件列表fileList的对象                  | data |
| import-data       | 提交导入请求，参数为上传成功的上传结果对象                                             | data |

数据 Data
---------

### base-scroll-table

滚动加载表格，扩展自element-ui的组件el-table。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.\*）。

属性：

| 属性名         | 说明                                                                                        | 类型     | 可选值     | 默认值 |
|----------------|---------------------------------------------------------------------------------------------|----------|------------|--------|
| fetch-method   | 查询数据方法，必需属性，参数为页码page，分页大小size，查询参数params，返回一个Promise对象。 | Function | \-         | \-     |
| virtual-scroll | 是否虚拟滚动                                                                                | Boolean  | true/false | true   |
| size           | 分页大小，必需属性。                                                                        | Number   | \-         | \-     |
| span-columns   | 需要合并的列。需要注意要使用此属性，必须设置row-key属性。                                   | Array    | \-         | []     |
| span-key       | 合并列依据的属性名称。需要注意要使用此属性，必须设置row-key属性。                           | String   | \-         | \-     |
| header-height  | 表头高度。                                                                                  | Number   | \-         | \-     |
| footer-height  | 表尾高度。                                                                                  | Number   | \-         | \-     |

### base-tree

树形组件。扩展自element-ui的el-tree组件。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.\*）。

treeProps属性：

| 属性名   | 说明                                                                                             | 类型    | 可选值     | 默认值 |
|----------|--------------------------------------------------------------------------------------------------|---------|------------|--------|
| readonly | 节点checkbox只读。禁用节点checkbox，但与disabled不同的是，readonly为true时也允许其处于选中状态。 | Boolean | true/false | true   |

其他 Others
-----------

### base-calendar

日历日程组件。

属性：

| 属性名              | 说明                        | 类型   | 可选值         | 默认值 |
|---------------------|-----------------------------|--------|----------------|--------|
| locale              | 语言                        | String | en-US/zh-CN    | en-US  |
| month-name-format   | 月份名称格式                | String | short/long     | short  |
| weekday-name-format | 星期名称格式                | String | short/long     | short  |
| start-day-of-week   | 周起始日                    | Number | 0-6            | 0      |
| display-period-type | 显示模式                    | String | month/week/day | month  |
| data                | 日程数据                    | Array  | \-             | []     |
| date-classes        | 自定义每个日期单元格的class | Object | \-             | \-     |

事件：

| 事件名        | 说明                                                                            | 参数      |
|---------------|---------------------------------------------------------------------------------|-----------|
| click-date    | 日期点击事件                                                                    | day       |
| click-event   | 日程项目点击事件                                                                | event,day |
| period-change | 切换日历时间段事件，参数： {calendarStart, calendarEnd, periodStart, periodEnd} | Data      |

### base-smart-search

智能搜索组件。

属性：

| 属性名           | 说明                              | 类型    | 可选值     | 默认值 |
|------------------|-----------------------------------|---------|------------|--------|
| search-width     | 搜索框宽度                        | String  | \-         | 450px  |
| disabled         | 是否已禁用                        | Boolean | true/false | false  |
| selectable       | 是否启用左侧下拉选                | Boolean | true/false | true   |
| default-search   | 左侧下拉选默认搜索项{label, name} | Object  | \-         | \-     |
| select-data      | 左侧下拉选可选项列表              | Array   | \-         | []     |
| form-model       | 高级查询表单model                 | Object  | \-         | {}     |
| form-label-width | 表单label宽度                     | String  | \-         | 120px  |

slots:

| 名称                  | 说明                                                   |
|-----------------------|--------------------------------------------------------|
| search-bar            | 查询框右侧空白粗靠左部分的工具栏slot。                 |
| tool-bar              | 查询框右侧空白靠右部分，高级查询按钮左侧的工具栏slot。 |
| group-tool-bar        | 高级查询所在按钮组中的工具栏slot。                     |
| adv-search-items      | 高级查询项。                                           |
| adv-search-operations | 高级查询表单按钮左侧的工具栏slot。                     |
| adv-form-tool-bar     | 高级查询表单按钮右侧的工具栏slot。                     |
| bottom-bar            | 高级查询表单底部的工具栏slot。                         |