组件文档

基于element-plus封装的常见的一些组件

组件列表

| 组件名 | 描述 | |--------|------| | date-picker | el-date-picker的封装版本 | | form-item | el-form-item的二次封装版 | | form-table-container | 将el-table和el-form结合起来的组件，形成带有搜索/编辑的表格的组件 | | table-edit-column | 编辑表格中的列 | | table-edit-column-action | 编辑表格中的操作列 | | form-table-item | 用于放置在form-table-container的默认插槽中，用于同时声明表格中的列和表单项单项，相当于el-col、form-item、el-table-column的结合体 | | form-table-search-item | 用于搜索表单的搜索、重置功能 | | load-list | 带有分页的加载列表的功能 | | select-data | el-select选择框的二次封装版本 | | sugar-button | el-button的二次封装版本 |

date-picker

el-date-picker的封装版本

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | available-start-date | Date | undefined | 允许的开始日期，若只传入此参数，则会禁用该日期之前的所有日期 | | available-end-date | Date | undefined | 允许的结束日期，若只传入传入此参数，则会禁用该日期之后的所有日期 | | model-value | number，string，Date，[Date, Date]，[string, string] | '' | 绑定值，若为数组，长度应为2 | | readonly | boolean | false | 日期选择器是否为只读状态 | | disabled | boolean | false | 日期选择器是否禁用 | | size | ''，'large'，'default'，'small' | - | 输入框尺寸 | | editable | boolean | true | 输入框是否可编辑 | | clearable | boolean | true | 是否显示清除按钮 | | placeholder | string | '' | 非范围选择模式下的占位文本 | | start-placeholder | string | - | 范围选择模式下开始日期的占位文本 | | end-placeholder | string | - | 范围选择模式下结束日期的占位文本 | | type | 'year'，'month'，'Date'，'dates'，'datetime'，'week'，'datetimerange'，'daterange'，'monthrange' | date | 选择器类型 | | format | string see | YYYY-MM-DD | 输入框中显示值的格式 | | popper-class | string | - | 日期选择器下拉框的自定义类名 | | popper-options | Partial<PopperOptions> | {} | 自定义下拉框配置，更多信息参见 popper.js | | range-separator | string | '-' | 范围分隔符 | | default-value | Date，[Date, Date] | - | 可选，日历的默认日期 | | default-time | Date，[Date, Date] | - | 可选，选择日期范围时使用的时间值 | | value-format | string see | - | 可选，绑定值的格式。若未指定，绑定值将为Date对象 | | id | string，[string, string] | - | 与原生input的id属性相同 | | name | string，[string, string] | '' | 与原生input的name属性相同 | | unlink-panels | boolean | false | 在范围选择器中解除两个日期面板的联动 | | prefix-icon | string，Component | '' | 自定义前缀图标组件。默认情况下，若type值为TimeLikeType，则为Clock，否则为Calendar | | clear-icon | string，Component | CircleClose | 自定义清除图标组件 | | validate-event | boolean | true | 是否触发表单验证 | | disabled-date | (data: Date) => boolean | - | 一个判断日期是否禁用的函数，参数为该日期，应返回布尔值 | | shortcuts | Array<{ text: string, value: Date，Function }> | [] | 设置快捷选项的对象数组 | | cell-class-name | (data: Date) => string | - | 设置自定义类名 | | teleported | boolean | true | 日期选择器下拉框是否 teleport 到 body 元素上 |

事件（Events）

| 名称 | 描述 | |------|------| | change | 用户确认值时触发 | | blur | 输入框失焦时触发 | | focus | 输入框聚焦时触发 | | calendar-change | 日历选中日期改变时触发 | | panel-change | 导航按钮点击时触发 | | visible-change | 日期选择器下拉框显示/隐藏时触发 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | 自定义单元格内容 | | range-separator | 自定义范围分隔符内容 |

form-item

el-form-item的二次封装版

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | value-type | 'string'，'number'，'array'，'object'，'boolean'，'date' | - | 验证规则中的类型 | | pattern | RegExp | - | 验证规则中的正则表达式 | | trigger | 'change'，'blur' | - | 验证规则中的触发方式 | | message | string | - | 验证规则中的提示信息 | | prop | string，string[] | - | model 中的键名。可以是属性的路径（例如 a.b.0 或 ['a', 'b', '0']）。在使用 validate 和 resetFields 方法时，该属性是必需的。 | | label | string | - | 标签文本。 | | label-width | string，number | '' | 标签宽度，例如 '50px'。支持 'auto'。 | | required | boolean | - | 是否为必填项，若省略则由验证规则决定。 | | rules | Arrayable<FormItemRule> | - | 表单验证规则，参见下表，更高级的用法请参考 async-validator。 | | error | string | - | 字段错误信息，设置该值后，字段将立即验证错误并显示此信息。 | | show-message | boolean | true | 是否显示错误信息。 | | inline-message | string，boolean | '' | 行内样式的验证信息。 | | size | ''，'large'，'default'，'small' | - | 控制该表单项内组件的尺寸。 | | for | string | - | 与原生 label 中的 for 属性相同。 | | validate-status | ''，'error'，'validating'，'success' | - | 表单项的验证状态。 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | 表单项的内容。 | | label | 自定义标签显示内容。 | | error | 自定义验证信息显示内容。 |

form-table-container

将el-table和el-form结合起来的组件，形成带有搜索/编辑的表格的组件

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | gutter | number | 0 | el-row中的gutter | | type | 'default'，'edit' | default | 组件类型, 分为编辑表格和默认表格 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | 默认插槽，只接受FormTableSearchItem，FormTableItem，el-form-item，el-table-column组件 | | table | el-table的放置位置，当然也可以放置除了el-table之外其他的内容 | | form | el-form的放置位置，当然也可以放置除了el-form之外其他的内容 |

table-edit-column

编辑表格中的列

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | hide-required-asterisk | boolean | - | 是否隐藏必填的*号 | | value-type | 'string'，'number'，'array'，'object'，'boolean'，'date' | - | 验证规则中的type | | pattern | RegExp | - | 验证规则中的pattern | | trigger | 'change'，'blur' | - | 验证规则中的trigger | | message | string | - | 验证规则中的message | | label-width | string，number | '' | 标签宽度，例如 '50px'。支持 'auto'。 | | required | boolean | - | 是否为必填项，若省略则由验证规则决定。 | | rules | Arrayable<FormItemRule> | - | 表单验证规则，参见下表，更高级的用法请参考 async-validator。 | | error | string | - | 字段错误信息，设置该值后，字段将立即验证错误并显示此信息。 | | show-message | boolean | true | 是否显示错误信息。 | | inline-message | string，boolean | '' | 行内样式的验证信息。 | | size | ''，'large'，'default'，'small' | - | 控制该表单项内组件的尺寸。 | | for | string | - | 与原生 label 中的 for 属性相同。 | | validate-status | ''，'error'，'validating'，'success' | - | 表单项的验证状态。 | | type | 'default'，'selection'，'index'，'expand' | default | 列的类型。若设置为 selection，则列会显示复选框；若设置为 index，则列会显示行的索引（从 1 开始）；若设置为 expand，则列会显示展开图标 | | index | number，(index: number) => number | - | 自定义每行的索引，在 type=index 的列中生效 | | label | string | - | 列的标题 | | column-key | string | - | 列的键名。若需要使用 filter-change 事件，需要通过该属性标识是哪个列正在被筛选 | | prop | string | - | 字段名。也可以使用其别名：property | | width | string，number | '' | 列的宽度 | | min-width | string，number | '' | 列的最小宽度。设置 width 的列有固定宽度，而设置 min-width 的列宽度会按比例分配 | | fixed | 'left'，'right'，boolean | false | 列是否固定在左侧/右侧。若为 true，则固定在左侧 | | render-header | (data: { column: TableColumnCtx<T>, $index: number }) => void | - | 该列表头的渲染函数 | | sortable | boolean，string | false | 列是否可排序。若将该属性设置为 'custom' 并监听 Table 的 sort-change 事件，可实现远程排序 | | sort-method | <T = any>(a: T, b: T) => number | - | 排序方法，在 sortable 为 true 时生效。应返回一个数字，类似 Array.sort | | sort-by | (row: any, index: number) => string，string，string[] | - | 指定按哪个属性排序，在 sortable 为 true 且 sort-method 为 undefined 时生效。若设置为数组，则当前一个属性相等时，会按后一个属性继续排序 | | sort-orders | [] | ['ascending', 'descending', null] | 排序数据时使用的排序策略顺序，在 sortable 为 true 时生效。接受一个数组，当用户点击表头时，列会按数组中元素的顺序进行排序 | | resizable | boolean | true | 列宽度是否可调整，在 el-table 的 border 为 true 时生效 | | formatter | (row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode，string | - | 格式化单元格内容的函数 | | show-overflow-tooltip | boolean | undefined | 是否隐藏超出内容，并在鼠标悬停单元格时显示提示框 | | align | 'left'，'center'，'right' | left | 对齐方式 | | header-align | 'left'，'center'，'right' | left | 表头的对齐方式。若省略，则会使用上述 align 属性的值 | | class-name | string | - | 列中单元格的类名 | | label-class-name | string | - | 该列标题的类名 | | selectable | (row: any, index: number) => boolean | - | 判断某行是否可被选中的函数，在 type 为 'selection' 时生效 | | reserve-selection | boolean | false | 数据刷新后是否保留选中状态，在 type 为 'selection' 时生效。注意：要使该功能生效，row-key 是必需的 | | filters | Array<{text: string, value: string}> | - | 数据筛选选项的数组。该数组中的每个元素都需要包含 text 和 value 属性 | | filter-placement | 'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end' | - | 筛选下拉框的 placement 属性 | | filter-class-name | string | - | 筛选下拉框的类名 | | filter-multiple | boolean | true | 数据筛选是否支持多选 | | filter-method | (value: any, row: any, column: TableColumnCtx<T>) => void | - | 数据筛选方法。若开启 filter-multiple，则每行都会调用该方法多次，只要其中一次调用返回 true，该行就会显示 | | filtered-value | string[] | - | 选中数据的筛选值，当表头通过 render-header 渲染时可能会用到 | | tooltip-formatter | (data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode，string | - | 使用 show-overflow-tooltip 时，自定义提示框内容 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | 表格列的自定义内容 | | header | 表头的自定义内容 | | filter-icon | 筛选图标的自定义内容 | | expand | 展开列的自定义内容 |

table-edit-column-action

编辑表格中的操作列

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | edit-callback | function | - | 编辑操作的回调函数，接收「打开加载」和「关闭加载」两个函数作为参数 | | delete-callback | function | - | 删除操作的回调函数，接收「打开加载」和「关闭加载」两个函数作为参数 | | cancel-callback | function | - | 取消操作的回调函数，接收「打开加载」和「关闭加载」两个函数作为参数 | | is-hidden-edit-btn | boolean | - | 是否隐藏「编辑」按钮 | | is-hidden-delete-btn | boolean | - | 是否隐藏「删除」按钮 | | has-icon | boolean | - | 是否显示编辑和删除按钮的图标 | | is-hidden-cancel-btn | boolean | - | 是否隐藏「取消」按钮 | | confirm-text | string | - | 「确认」按钮的文本内容 | | cancel-text | string | - | 「取消」按钮的文本内容 | | edit-text | string | - | 「编辑」按钮的文本内容 | | delete-text | string | - | 「删除」按钮的文本内容 | | btn-is-text | boolean | - | 按钮是否为「纯文本样式」（非按钮组件，仅文字） | | label | string | - | 列的标题 | | column-key | string | - | 列的键名。若需要使用 filter-change 事件，需要通过该属性标识是哪个列正在被筛选 | | width | string，number | '' | 列的宽度 | | min-width | string，number | '' | 列的最小宽度。设置 width 的列有固定宽度，而设置 min-width 的列宽度会按比例分配 | | fixed | 'left'，'right'，boolean | false | 列是否固定在左侧/右侧。若为 true，则固定在左侧 | | render-header | (data: { column: TableColumnCtx<T>, $index: number }) => void | - | 该列表头的渲染函数 | | sortable | boolean，string | false | 列是否可排序。若将该属性设置为 'custom' 并监听 Table 的 sort-change 事件，可实现远程排序 | | sort-method | <T = any>(a: T, b: T) => number | - | 排序方法，在 sortable 为 true 时生效。应返回一个数字，类似 Array.sort | | sort-by | (row: any, index: number) => string，string，string[] | - | 指定按哪个属性排序，在 sortable 为 true 且 sort-method 为 undefined 时生效。若设置为数组，则当前一个属性相等时，会按后一个属性继续排序 | | sort-orders | [] | ['ascending', 'descending', null] | 排序数据时使用的排序策略顺序，在 sortable 为 true 时生效。接受一个数组，当用户点击表头时，列会按数组中元素的顺序进行排序 | | resizable | boolean | true | 列宽度是否可调整，在 el-table 的 border 为 true 时生效 | | formatter | (row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode，string | - | 格式化单元格内容的函数 | | show-overflow-tooltip | boolean | undefined | 是否隐藏超出内容，并在鼠标悬停单元格时显示提示框 | | align | 'left'，'center'，'right' | left | 对齐方式 | | header-align | 'left'，'center'，'right' | left | 表头的对齐方式。若省略，则会使用上述 align 属性的值 | | class-name | string | - | 列中单元格的类名 | | label-class-name | string | - | 该列标题的类名 | | selectable | (row: any, index: number) => boolean | - | 判断某行是否可被选中的函数，在 type 为 'selection' 时生效 | | reserve-selection | boolean | false | 数据刷新后是否保留选中状态，在 type 为 'selection' 时生效。注意：要使该功能生效，row-key 是必需的 | | filters | Array<{text: string, value: string}> | - | 数据筛选选项的数组。该数组中的每个元素都需要包含 text 和 value 属性 | | filter-placement | 'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end' | - | 筛选下拉框的 placement 属性 | | filter-class-name | string | - | 筛选下拉框的类名 | | filter-multiple | boolean | true | 数据筛选是否支持多选 | | filter-method | (value: any, row: any, column: TableColumnCtx<T>) => void | - | 数据筛选方法。若开启 filter-multiple，则每行都会调用该方法多次，只要其中一次调用返回 true，该行就会显示 | | filtered-value | string[] | - | 选中数据的筛选值，当表头通过 render-header 渲染时可能会用到 | | tooltip-formatter | (data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode，string | - | 使用 show-overflow-tooltip 时，自定义提示框内容 |

插槽（Slots）

| 名称 | 描述 | |------|------| | header | 表头的自定义内容 | | other-actions | 其他操作 |

form-table-item

用于放置在form-table-container的默认插槽中，用于同时声明表格中的列和表单项单项，相当于el-col、form-item、el-table-column的结合体

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | span | number | 24 | 栅格占据的列数 | | offset | number | 0 | 栅格左侧的间隔列数 | | push | number | 0 | 栅格向右移动的列数 | | pull | number | 0 | 栅格向左移动的列数 | | xs | number，{span?: number, offset?: number, pull?: number, push?: number} | - | <768px 响应式列数或列属性对象 | | sm | number，{span?: number, offset?: number, pull?: number, push?: number} | - | ≥768px 响应式列数或列属性对象 | | md | number，{span?: number, offset?: number, pull?: number, push?: number} | - | ≥992px 响应式列数或列属性对象 | | lg | number，{span?: number, offset?: number, pull?: number, push?: number} | - | ≥1200px 响应式列数或列属性对象 | | xl | number，{span?: number, offset?: number, pull?: number, push?: number} | - | ≥1920px 响应式列数或列属性对象 | | tag | string | div | 自定义元素标签 | | hidden-table-column | boolean | - | 是否隐藏表格的列 | | value-type | 'string'，'number'，'array'，'object'，'boolean'，'date' | - | 验证规则中的type | | pattern | RegExp | - | 验证规则中的pattern | | trigger | 'change'，'blur' | - | 验证规则中的trigger | | message | string | - | 验证规则中的message | | label-width | string，number | '' | 标签宽度，例如 '50px'。支持 'auto'。 | | required | boolean | - | 是否为必填项，若省略则由验证规则决定。 | | rules | Arrayable<FormItemRule> | - | 表单验证规则，参见下表，更高级的用法请参考 async-validator。 | | error | string | - | 字段错误信息，设置该值后，字段将立即验证错误并显示此信息。 | | show-message | boolean | true | 是否显示错误信息。 | | inline-message | string，boolean | '' | 行内样式的验证信息。 | | size | ''，'large'，'default'，'small' | - | 控制该表单项内组件的尺寸。 | | for | string | - | 与原生 label 中的 for 属性相同。 | | validate-status | ''，'error'，'validating'，'success' | - | 表单项的验证状态。 | | type | 'default'，'selection'，'index'，'expand' | default | 列的类型。若设置为 selection，则列会显示复选框；若设置为 index，则列会显示行的索引（从 1 开始）；若设置为 expand，则列会显示展开图标 | | index | number，(index: number) => number | - | 自定义每行的索引，在 type=index 的列中生效 | | label | string | - | 列的标题 | | column-key | string | - | 列的键名。若需要使用 filter-change 事件，需要通过该属性标识是哪个列正在被筛选 | | prop | string | - | 字段名。也可以使用其别名：property | | width | string，number | '' | 列的宽度 | | min-width | string，number | '' | 列的最小宽度。设置 width 的列有固定宽度，而设置 min-width 的列宽度会按比例分配 | | fixed | 'left'，'right'，boolean | false | 列是否固定在左侧/右侧。若为 true，则固定在左侧 | | render-header | (data: { column: TableColumnCtx<T>, $index: number }) => void | - | 该列表头的渲染函数 | | sortable | boolean，string | false | 列是否可排序。若将该属性设置为 'custom' 并监听 Table 的 sort-change 事件，可实现远程排序 | | sort-method | <T = any>(a: T, b: T) => number | - | 排序方法，在 sortable 为 true 时生效。应返回一个数字，类似 Array.sort | | sort-by | (row: any, index: number) => string，string，string[] | - | 指定按哪个属性排序，在 sortable 为 true 且 sort-method 为 undefined 时生效。若设置为数组，则当前一个属性相等时，会按后一个属性继续排序 | | sort-orders | [] | ['ascending', 'descending', null] | 排序数据时使用的排序策略顺序，在 sortable 为 true 时生效。接受一个数组，当用户点击表头时，列会按数组中元素的顺序进行排序 | | resizable | boolean | true | 列宽度是否可调整，在 el-table 的 border 为 true 时生效 | | formatter | (row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode，string | - | 格式化单元格内容的函数 | | show-overflow-tooltip | boolean | undefined | 是否隐藏超出内容，并在鼠标悬停单元格时显示提示框 | | align | 'left'，'center'，'right' | left | 对齐方式 | | header-align | 'left'，'center'，'right' | left | 表头的对齐方式。若省略，则会使用上述 align 属性的值 | | class-name | string | - | 列中单元格的类名 | | label-class-name | string | - | 该列标题的类名 | | selectable | (row: any, index: number) => boolean | - | 判断某行是否可被选中的函数，在 type 为 'selection' 时生效 | | reserve-selection | boolean | false | 数据刷新后是否保留选中状态，在 type 为 'selection' 时生效。注意：要使该功能生效，row-key 是必需的 | | filters | Array<{text: string, value: string}> | - | 数据筛选选项的数组。该数组中的每个元素都需要包含 text 和 value 属性 | | filter-placement | 'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end' | - | 筛选下拉框的 placement 属性 | | filter-class-name | string | - | 筛选下拉框的类名 | | filter-multiple | boolean | true | 数据筛选是否支持多选 | | filter-method | (value: any, row: any, column: TableColumnCtx<T>) => void | - | 数据筛选方法。若开启 filter-multiple，则每行都会调用该方法多次，只要其中一次调用返回 true，该行就会显示 | | filtered-value | string[] | - | 选中数据的筛选值，当表头通过 render-header 渲染时可能会用到 | | tooltip-formatter | (data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode，string | - | 使用 show-overflow-tooltip 时，自定义提示框内容 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | el-form-item中的default插槽 | | formItemLabel | el-form-item中的label插槽 | | formItemError | el-form-item中的error插槽 | | table | el-table-column中的插槽 |

form-table-search-item

用于搜索表单的搜索、重置功能

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | search-text | string | 搜索 | 搜索按钮的文本内容 | | reset-text | string | 重置 | 重置按钮的文本内容 |

事件（Events）

| 名称 | 描述 | |------|------| | search | 点击搜索按钮时触发的事件 | | reset | 点击重置按钮时触发的事件 |

load-list

带有分页的加载列表的功能

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | load | function | - | 数据加载函数，接收页码、页大小、总条数，返回包含数据的 Promise | | error-text | string | - | 错误状态时显示的文本 | | pagination-background | boolean | true | el-pagination的background属性 | | pagination-size | 'large'，'small'，'default' | default | el-pagination的size属性 | | pagination-layout | string | total, sizes, prev, pager, next, jumper | el-pagination的layout属性 | | empty-text | string | - | 数据为空时显示的文本 | | is-auto-load | boolean | - | 是否自动加载数据 | | pagination-align | 'start'，'center'，'end' | - | 分页器对齐方式，可选 'start'、'center'、'end' | | hide-on-single-page | boolean | - | 只有一页时是否隐藏分页器 | | disable-scroll-top | boolean | - | 是否禁用滚动到顶部的行为 | | hide-default-empty-or-error-handle | boolean | - | 隐藏默认的空数据或错误时的处理逻辑 | | scroll-container | any | - | 滚动容器的引用 | | page-config | object | - | 分页配置，包含 list 和 total 字段的键名映射 |

事件（Events）

| 名称 | 描述 | |------|------| | loaded | 数据加载完成后触发的事件 |

暴露的方法/属性（exposed）

| 名称 | 描述 | 类型 | |------|------|------| | refresh | 刷新列表方法 | (isForce: boolean isScrollTop: boolean ) | | scrollToTop | 滚动到顶部 | - | | refreshOfDelete | 删除时调用的刷新列表的方法 | (delCount: number ) |

select-data

el-select选择框的二次封装版本

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | model-value | string，number，boolean，object，array | - | 绑定值 | | selected | object | - | 可结合v-model:selected使用，当前选中的modelValue所对应的对象 | | labelKey | string | - | label的键名 | | valueKey | object | - | value的键名 | | multiple | boolean | false | 是否启用多选 | | options | Array<{[key: string]: any}>，Function | - | 选项数据，value、label和disabled的键名可通过props自定义 | | [props] | object | - | 配置选项 | | disabled | boolean | false | 是否禁用选择框 | | value-key | string | value | 值的唯一标识键名，当值为对象时必填 | | size | ''，'large'，'default'，'small' | - | 输入框尺寸 | | clearable | boolean | false | 是否可清空选择 | | collapse-tags | boolean | false | 多选时是否将选中项折叠为文字显示 | | collapse-tags-tooltip | boolean | false | 当启用collapse-tags时，鼠标悬停折叠文字时是否显示所有选中的标签。使用此属性需先开启collapse-tags | | multiple-limit | number | 0 | 多选时用户最多可选择的选项数。设为0则无限制 | | id | string | - | 原生input的id属性 | | name | string | - | 选择框输入框的name属性 | | effect | 'dark'，'light'，string | light | 提示框主题，内置主题：dark / light | | autocomplete | string | off | 选择框输入框的autocomplete属性 | | placeholder | string | - | 占位文本，默认为'Select' | | filterable | boolean | false | 是否可搜索 | | allow-create | boolean | false | 是否允许创建新选项。使用此属性需先开启filterable | | filter-method | (query: string) => void | - | 自定义搜索方法，第一个参数为当前输入值。使用此属性需先开启filterable | | remote | boolean | false | 是否从服务器加载选项 | | remote-method | (query: string) => void | - | 输入值变化时触发的函数，参数为当前输入值。使用此属性需先开启filterable | | remote-show-suffix | boolean | false | 远程搜索模式下是否显示后缀图标 | | loading | boolean | false | 是否正在从服务器加载数据 | | loading-text | string | - | 从服务器加载数据时显示的文本，默认为'Loading' | | no-match-text | string | - | 搜索无匹配结果时显示的文本，也可使用empty插槽，默认为'No matching data' | | no-data-text | string | - | 无选项时显示的文本，也可使用empty插槽，默认为'No data' | | popper-class | string | '' | 选择框下拉菜单的自定义类名 | | popper-style | string，object | - | 选择框下拉菜单的自定义样式 | | reserve-keyword | boolean | true | 当开启multiple和filterable时，选择选项后是否保留当前关键词 | | default-first-option | boolean | false | 按回车时选择第一个匹配的选项。需配合filterable或remote使用 | | teleported | boolean | true | 选择框下拉菜单是否使用 teleport，若为true，则会被传送到append-to指定的位置 | | append-to | CSSSelector，HTMLElement | - | 选择框下拉菜单挂载到哪个元素上 | | persistent | boolean | true | 当选择框下拉菜单未激活且persistent为false时，下拉菜单会被销毁 | | automatic-dropdown | boolean | false | 对于不可搜索的选择框，此属性决定输入框获得焦点时是否弹出选项菜单 | | clear-icon | string，Component | CircleClose | 自定义清空图标组件 | | fit-input-width | boolean | false | 下拉菜单的宽度是否与输入框相同 | | suffix-icon | string，Component | ArrowDown | 自定义后缀图标组件 | | tag-type | ''，'success'，'info'，'warning'，'danger' | info | 标签类型 | | tag-effect | ''，'light'，'dark'，'plain' | light | 标签效果 | | validate-event | boolean | true | 是否触发表单验证 | | offset | number | 12 | 下拉菜单的偏移量 | | show-arrow | boolean | true | 下拉菜单是否显示箭头 | | placement | 'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end' | bottom-start | 下拉菜单的位置 | | fallback-placements | Placement[] | ['bottom-start', 'top-start', 'right', 'left'] | 下拉菜单的备选位置列表 popper.js | | max-collapse-tags | number | 1 | 最多显示的标签数量。使用此属性需先开启collapse-tags | | popper-options | objectrefer to doc | {} | popper.js 参数 | | aria-label | string | - | 与原生input的aria-label相同 | | empty-values | array | - | 组件的空值，参见config-provider | | value-on-clear | string，number，boolean，Function | - | 清空时的返回值，参见config-provider | | suffix-transition | boolean | true | 下拉菜单显示/隐藏时图标的动画 | | tabindex | string，number | - | 输入框的tabindex属性 |

事件（Events）

| 名称 | 描述 | |------|------| | change | 选中值变化时触发 | | visible-change | 下拉菜单显示/隐藏时触发 | | remove-tag | 多选模式下移除标签时触发 | | clear | 可清空的选择框点击清空图标时触发 | | blur | 输入框失去焦点时触发 | | focus | 输入框获得焦点时触发 | | popup-scroll | 下拉菜单滚动时触发 | | update:selected | 用于v-model:selected的事件 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | 选项组件列表 | | header | 下拉菜单顶部的内容 | | footer | 下拉菜单底部的内容 | | prefix | 选择框前缀内容 | | empty | 无选项时的内容 | | tag | 选择框标签内容，引入了子标签data、selectDisabled和deleteTag | | loading | 选择框加载状态的内容 | | label | 选择框标签内容。引入了index |

sugar-button

el-button的二次封装版本

属性（Props）

| 名称 | 类型 | 默认值 | 描述 | |------|------|--------|------| | auto-loading | boolean | - | 触发点击事件之后，回调函数中会包含openLoading和closeLoading两个函数 | | auto-message-box | boolean | - | 触发点击事件之后，会自动弹出消息框 | | message-box-options | SugarButtonPropsRequired['messageBoxOptions'] | - | 消息框配置项 | | size | 'large'，'default'，'small' | - | 按钮尺寸 | | type | 'default'，'primary'，'success'，'warning'，'danger'，'info'，''，'text' | - | 按钮类型，当设置color时，后者优先级更高 | | plain | boolean | false | 是否为朴素按钮 | | text | boolean | false | 是否为文字按钮 | | bg | boolean | false | 文字按钮是否始终显示背景色 | | link | boolean | false | 是否为链接按钮 | | round | boolean | false | 是否为圆角按钮 | | circle | boolean | false | 是否为圆形按钮 | | loading-icon | string，Component | Loading | 自定义加载图标组件 | | disabled | boolean | false | 是否禁用按钮 | | icon | string，Component | - | 图标组件 | | autofocus | boolean | false | 与原生按钮的autofocus属性相同 | | native-type | 'button'，'submit'，'reset' | button | 与原生按钮的type属性相同 | | auto-insert-space | boolean | false | 自动在两个中文字符之间插入空格（仅当文本长度为2且所有字符均为中文时生效） | | color | string | - | 自定义按钮颜色，会自动计算hover和active状态的颜色 | | dark | boolean | false | 深色模式，会自动将color转换为深色模式下的颜色 | | tag | string，Component | button | 自定义元素标签 |

事件（Events）

| 名称 | 描述 | |------|------| | click | 按钮点击事件 |

插槽（Slots）

| 名称 | 描述 | |------|------| | default | 自定义默认内容 | | loading | 自定义加载组件 | | icon | 自定义图标组件 |