33 KiB
基础组件
Cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
基础用法
有两种触发子菜单的方式
<template #source>
type为'cascader'
禁用选项
通过在数据源中设置 disabled 字段来声明该选项是禁用的
<template #source>
本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。
多选
可通过 multiple = true 来开启多选模式
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Checkbox 多选框
一组备选项中进行多选
基础用法
单独使用可以表示两种状态之间的切换。
<template #source>
要使用 Checkbox 组件，只需要配置type: 'checkbox'，选中意味着变量的值为true。默认绑定变量的值会是 Boolean ，选中为 true 。
禁用状态
多选框不可用状态。
<template #source>
设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。
多选框组
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
<template #source>
checkbox-group 元素能把多个 checkbox 管理为一组。
Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| activeValue | 选中时的值 | string / number / Function | — | 1 |
| inactiveValue | 没有选中时的值 | string / number / Function | — | 0 |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
CheckboxGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
| options | 选项 | Array | — | - |
ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
DatePicker 日期选择器
用于选择或输入日期
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
禁用状态
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
日期格式
使用format指定输入框的格式；使用valueFormat指定绑定值的格式。
默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
:::warning 请注意大小写 :::
| 格式 | 含义 | 备注 | 举例 |
|---|---|---|---|
yyyy |
年 | 2017 | |
M |
月 | 不补0 | 1 |
MM |
月 | 01 | |
W |
周 | 仅周选择器的 format 可用；不补0 |
1 |
WW |
周 | 仅周选择器的 format 可用 |
01 |
d |
日 | 不补0 | 2 |
dd |
日 | 02 | |
H |
小时 | 24小时制；不补0 | 3 |
HH |
小时 | 24小时制 | 03 |
h |
小时 | 12小时制，须和 A 或 a 使用；不补0 |
3 |
hh |
小时 | 12小时制，须和 A 或 a 使用 |
03 |
m |
分钟 | 不补0 | 4 |
mm |
分钟 | 04 | |
s |
秒 | 不补0 | 5 |
ss |
秒 | 05 | |
timestamp |
JS时间戳 | 组件绑定值为number类型 |
1483326245000 |
[MM] |
不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
DateTimePicker 日期时间选择器
在同一个选择器里选择日期和时间
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
禁用状态
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
日期格式
使用format指定输入框的格式；使用valueFormat指定绑定值的格式。
默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
:::warning 请注意大小写 :::
| 格式 | 含义 | 备注 | 举例 |
|---|---|---|---|
yyyy |
年 | 2017 | |
M |
月 | 不补0 | 1 |
MM |
月 | 01 | |
W |
周 | 仅周选择器的 format 可用；不补0 |
1 |
WW |
周 | 仅周选择器的 format 可用 |
01 |
d |
日 | 不补0 | 2 |
dd |
日 | 02 | |
H |
小时 | 24小时制；不补0 | 3 |
HH |
小时 | 24小时制 | 03 |
h |
小时 | 12小时制，须和 A 或 a 使用；不补0 |
3 |
hh |
小时 | 12小时制，须和 A 或 a 使用 |
03 |
m |
分钟 | 不补0 | 4 |
mm |
分钟 | 04 | |
s |
秒 | 不补0 | 5 |
ss |
秒 | 05 | |
A |
AM/PM | 仅 format 可用，大写 |
AM |
a |
am/pm | 仅 format 可用，小写 |
am |
timestamp |
JS时间戳 | 仅 valueFormat 可用；组件绑定值为number类型 |
1483326245000 |
[MM] |
不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd HH:mm:ss |
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
Display 只读文本
用于显示，不可编辑
TS 定义
interface Display extends FormItem {
type: 'display';
}
点击查看FormItem的定义
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
Hidden 隐藏域
改值体现于最终提交的表单中，用于例如编辑记录的id这种场景中
TS 定义
interface Hidden extends FormItem {
type: 'hidden';
}
点击查看FormItem的定义
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
InputNumber 计数器
仅允许输入标准的数字值，可定义范围
基础用法
<template #source>
type为'number'
禁用状态
<template #source>
disabled 属性接受一个 Boolean，设置为 true 即可禁用整个组件，也可以接受一个返回 Boolean 的函数，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max 属性，不设置 min 和 max 时，最小值为 0。
步数
允许定义递增递减的步数控制
<template #source>
设置 step 属性可以控制步长，接受一个 Number 。
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
Input 输入框
通过鼠标或键盘输入字符
基础用法
<template #source>
Input输入框的type为'text', 是type的默认值，所以可以不配置
禁用状态
<template #source>
通过 disabled 属性指定是否禁用 input 组件
复合型输入框
后置内容
<template #source>
可以通过配置append来增加一个后置内容。
<template #source>
可以通过配置append来增加一个后置按钮。
过滤内容
<template #source>
设置filter为'number'，可以将值转换成数值，也可以配置一个函数来自由转换。
去掉首尾空格
<template #source>
设置trim为true'，可以去掉首尾空格。
显示详情
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| tooltip | 输入时显示内容 | boolean | — | false |
| placeholder | 输入框占位文本 | string | — | — |
| trim | 是否去掉首尾空格 | boolean | — | false |
| filter | 过滤值 | string / Function | number | - |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
| append | 后置内容 | string / Object | — | - |
append Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 内容类型 | string | button | — |
| text | 文本内容 | string | — | — |
| handler | 点击操作 | Function | — | - |
Link 链接
用于显示，不可编辑
TS 定义
interface Link extends FormItem {
type: 'link';
href?: string | typeof LinkHrefFunction;
css?: {
[key: string]: string | number;
};
disabledCss?: {
[key: string]: string | number;
};
formTitle?: string;
formWidth?: number | string;
displayText?: string | typeof LinkDisplayTextFunction;
form: FormConfig | typeof LinkFormFunction;
}
点击查看FormItem的定义
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
打开表单
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
Radio 单选框
在一组备选项中进行单选
TS 定义
interface RedioGroup extends FormItem {
type: 'redioGroup';
options: {
value: any;
text: string;
}[];
}
点击查看FormItem的定义
基础用法
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
<template #source>
要使用 Radio 组件，只需要配置type: 'radio-group'。
禁用状态
单选框不可用的状态。
<template #source>
只要在配置中设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。
RadioGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| options | 选项 | Array | — | - |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
Select 选择器
当选项过多时，使用下拉菜单展示并选择内容。
基础用法
适用广泛的基础单选
<template #source>
type为'select'
有禁用选项
<template #source>
在 opitons 选项配置中，设定 disabled 值为 true，即可禁用该选项
禁用状态
选择器不可用状态
<template #source>
为 el-select 设置 disabled 属性，则整个选择器不可用
基础多选
适用性较广的基础多选，用 Tag 展示已选项
分组
备选项进行分组展示
<template #source>
配置group为true
创建条目
可以创建并选中选项中不存在的条目
远程选项
通过接口请求获取选项列表
<template #source>
配置remote为true，然后配置option，而不是options
:::tip 如果 Select 的绑定值为对象类型，请务必指定 valueKey 作为它的唯一性标识。 :::
Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| multiple | 是否多选 | boolean | — | false |
| valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
| allowCreate | 是否允许用户创建新条目 | boolean | — | false |
| remote | 是否为远程搜索 | boolean | — | false |
| group | 是否选择分组 | boolean | — | false |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
| options | 选项 | Array | — | - |
| option | 选项 | Object | — | - |
options item
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 选项的标签 | string/number/object | — | |
| value | 选项的值 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| label | string | — | — | — |
| options | Array | — | — | — |
option
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| url | string | — | — | — |
| root | string | — | — | — |
| text | string / Function | — | — | — |
| value | string / Function | — | — | — |
Switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基本用法
扩展的 value 类型
<template #source>
设置 activeValue 和 inactiveValue 属性，接受 Boolean , String 或 Number 类型的值。
禁用状态
<template #source>
设置 disabled 属性，接受一个 Boolean，设置 true 即可禁用。
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| disabled | 是否禁用 | boolean / Function | — | false |
| active-value | switch 打开时的值 | boolean / string / number | — | true |
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
Textarea 文本域
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
禁用状态
<template #source>
通过 disabled 属性指定是否禁用 input 组件
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| placeholder | 输入框占位文本 | string | — | — |
| trim | 是否去掉首尾空格 | boolean | — | false |
| filter | 过滤值 | string / Function | number | - |
| onChange | 值变化时触发的函数 | OnChangeHandler | — | - |
TimePicker 时间选择器
用于选择或输入日期
基础用法
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
禁用状态
<template #source>
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / Function | — | false |