Basic
1、layout布局:通过 row 和 col 组件
栅格系统 span表占 ?/24;
row 组件 提供 gutter
属性来指定每一栏之间的间隔,默认间隔为 0;
通过制定 col 组件的 offset
属性可以指定分栏偏移的栏数;
将 type
属性赋值为 'flex',可以启用 flex 布局,并可通过 justify
属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式;
参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs
、sm
、md
、lg
和 xl;
2、 container 布局容器
<el-container>
:外层容器。当子元素中包含 <el-header>
或 <el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列。
<el-header>
:顶栏容器。
<el-aside>
:侧边栏容器。
<el-main>
:主要区域容器。
<el-footer>
:底栏容器。
Form
3、checkbox 多选框
indeterminate
属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果;
4、input 输入框
密码框:使用show-password
属性即可得到一个可切换显示隐藏的密码框;
带输入建议:autocomplete 是一个可带输入建议的输入框组件,fetch-suggestions
是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中;
输入长度限制:在使用 maxlength
属性限制最大输入长度的同时,可通过设置 show-word-limit
属性来展示字数统计;
5、select 选择框:如果 Select 的绑定值为对象类型,请务必指定 value-key
作为它的唯一性标识。
可搜索:为el-select
添加filterable
属性即可启用搜索功能;
远程搜索:为了启用远程搜索,需要将filterable
和remote
设置为true
,同时传入一个remote-method;
创建条目:使用allow-create
属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable
必须为真。
6、Cascader 级联选择器
可清空:通过 clearable
设置输入框可清空;
仅显示最后一级:属性show-all-levels
定义了是否显示完整的路径,将其赋值为false
则仅显示最后一级;
多选:可通过 props.multiple = true
来开启多选模式;
选择任意一级选项:可通过 props.checkStrictly = true
来设置父子节点取消选中关联;
动态加载:通过lazy
开启动态加载,并通过lazyload
来设置加载数据源的方法。lazyload
方法有两个参数,第一个参数node
为当前点击的节点,第二个resolve
为数据加载完成的回调(必须调用);
可搜索:将filterable
赋值为true
即可打开搜索功能,默认会匹配节点的label
或所有父节点的label
(由show-all-levels
决定)中包含输入值的选项;
7、DatePicker 日期选择器
日期单位:基本单位由 type 属性指定。date week month year dates
daterange [选择日期范围]
monthrange [选择月份范围]
日期格式:使用format
指定输入框的格式;使用value-format
指定绑定值的格式;
8、DateTimePicker 日期时间选择器
日期和时间点:通过设置type
属性为datetime
,即可在同一个选择器里同时进行日期和时间的选择;
日期和时间范围:设置type
为datetimerange
即可选择日期和时间范围;
9、upload 上传
点击上传:通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit
和on-exceed
来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove
来阻止文件移除操作;
用户头像上传:使用 before-upload
限制用户上传的图片格式和大小;
照片墙:使用 list-type
属性来设置文件列表的样式。 text/picture/picture-card
图片列表缩略图::file-list="fileList"
拖动上传:drag
手动上传::auto-upload="false"
Data
10、Tree 树形控件
手风琴模式:对于同一级的节点,一次只能展开一个 accordion
可拖拽节点:通过 draggable 属性可让节点变为可拖拽;