element-UI 熟悉

Basic

1、layout布局:通过 row 和 col 组件

栅格系统 span表占 ?/24;

row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0;

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数;

将 type 属性赋值为 'flex',可以启用 flex 布局,并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式;

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xssmmdlg 和 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属性即可启用搜索功能;

远程搜索:为了启用远程搜索,需要将filterableremote设置为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,即可在同一个选择器里同时进行日期和时间的选择;

日期和时间范围:设置typedatetimerange即可选择日期和时间范围;

9、upload 上传

点击上传:通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limiton-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作;

用户头像上传:使用 before-upload 限制用户上传的图片格式和大小;

照片墙:使用 list-type 属性来设置文件列表的样式。 text/picture/picture-card

图片列表缩略图::file-list="fileList"

拖动上传:drag

手动上传::auto-upload="false"

 Data

10、Tree 树形控件

手风琴模式:对于同一级的节点,一次只能展开一个 accordion

可拖拽节点:通过 draggable 属性可让节点变为可拖拽;

猜你喜欢

转载自www.cnblogs.com/pleaseAnswer/p/12512131.html