连锁店管理网站开发,绍兴市交通建设有限公司网站,另一更新正在进行 wordpress,建设银行兴安支行网站结束了vue的基础学习#xff0c;现在进一步学习组件
Element-Plus部分学习目标#xff1a;
Element Plus1、查阅官方文档指南2、学习常用组件的使用方法3、Table、Pagination、Form4、Input、Input Number、Switch、Select、Date Picker、Button5、Message、MessageBox、N…结束了vue的基础学习现在进一步学习组件
Element-Plus部分学习目标
Element Plus1、查阅官方文档指南2、学习常用组件的使用方法3、Table、Pagination、Form4、Input、Input Number、Switch、Select、Date Picker、Button5、Message、MessageBox、Notification
查阅官方文档 快速开始 | Element Plus
具体内容官网讲解的很清楚这里只根据学习目标以及以后可能常用的部分做总结学习理解的话还是建议大家直接去看官方文档。
Table 表格组件 Table 表格 | Element Plus
常用属性
属性类型可选值/说明默认值dataArray表格数据数组[]borderBooleantrue/false (是否显示边框)falsestripeBooleantrue/false (是否显示斑马纹)falseheightString/Number固定高度如 400px-max-heightString/Number最大高度-sizeStringmedium / small / mini (表格尺寸)-fitBooleantrue/false (列宽是否自撑开)trueshow-headerBooleantrue/false (是否显示表头)truehighlight-current-rowBooleantrue/false (是否高亮当前行)false
Table-column 属性
属性类型可选值/说明默认值propString对应列内容的字段名-labelString显示的标题-widthString/Number列宽度-min-widthString/Number最小列宽-fixedString/Booleantrue/false/left/right (固定列)-sortableBoolean/Stringtrue/false/custom (是否可排序)falsealignStringleft/center/right (对齐方式)leftheader-alignStringleft/center/right (表头对齐方式)-
Pagination 分页组件 Pagination 分页 | Element Plus
常用属性
属性类型可选值/说明默认值current-pageNumber当前页码1page-sizeNumber每页显示条目数10totalNumber总条目数-page-sizesArray[10, 20, 30, 40, 50, 100] (每页显示个数选择器的选项设置)[10, 20, 30, 50, 100]layoutString组件布局可用值 sizes, prev, pager, next, jumper, -, total, slotprev, pager, next, jumper, -, totalbackgroundBooleantrue/false (是否为分页按钮添加背景色)falsesmallBooleantrue/false (是否使用小型分页样式)false
Form 表单组件
常用属性
属性类型可选值/说明默认值modelObject表单数据对象-rulesObject表单验证规则-label-positionStringright/left/top (表单域标签的位置)rightlabel-widthString/Number表单域标签的宽度-sizeStringmedium / small / mini (控制表单内组件尺寸)-disabledBooleantrue/false (是否禁用表单中所有组件)falseinlineBooleantrue/false (行内表单模式)falseshow-messageBooleantrue/false (是否显示校验错误信息)true
Form-item 属性
属性类型可选值/说明默认值propString表单域 model 字段-labelString标签文本-label-widthString/Number标签宽度-requiredBooleantrue/false (是否必填)falserulesObject/Array表单验证规则-sizeStringmedium / small / mini (控制组件尺寸)-
Input 输入框
常用属性
属性类型可选值/说明默认值typeStringtext / textarea / password / number / email / urltextsizeStringmedium / small / mini (输入框尺寸)-maxlengthNumber最大输入长度-minlengthNumber最小输入长度-show-word-limitBooleantrue/false (是否显示输入字数统计)falseclearableBooleantrue/false (是否可清空)falseshow-passwordBooleantrue/false (是否显示切换密码图标)falsedisabledBooleantrue/false (是否禁用)falseprefix-iconString输入框头部图标类名-suffix-iconString输入框尾部图标类名-
Select 选择器
常用属性
属性类型可选值/说明默认值multipleBooleantrue/false (是否多选)falsedisabledBooleantrue/false (是否禁用)falseclearableBooleantrue/false (是否可以清空选项)falsefilterableBooleantrue/false (是否可搜索)falseremoteBooleantrue/false (是否为远程搜索)falseloadingBooleantrue/false (是否正在从远程获取数据)falsesizeStringmedium / small / mini (选择器尺寸)-collapse-tagsBooleantrue/false (多选时是否将选中值按文字的形式展示)false
Option 属性
属性类型可选值/说明默认值valueString/Number/Boolean/Object选项的值-labelString/Number选项的标签-disabledBooleantrue/false (是否禁用该选项)false
Date Picker 日期选择器
常用属性
属性类型可选值/说明默认值typeStringyear/month/date/dates/datetime/datetimerange/daterange/monthrangedateformatString显示在输入框中的格式如 yyyy-MM-dd-value-formatString绑定值的格式-placeholderString占位文本-range-separatorString选择范围时的分隔符-start-placeholderString范围选择时开始日期的占位内容-end-placeholderString范围选择时结束日期的占位内容-disabledBooleantrue/false (是否禁用)falseclearableBooleantrue/false (是否显示清除按钮)truesizeStringmedium / small / mini (输入框尺寸)-
Button 按钮
常用属性
属性类型可选值/说明默认值typeStringprimary / success / warning / danger / info / text-sizeStringmedium / small / mini (按钮尺寸)-plainBooleantrue/false (是否朴素按钮)falseroundBooleantrue/false (是否圆角按钮)falsecircleBooleantrue/false (是否圆形按钮)falseloadingBooleantrue/false (是否加载中状态)falsedisabledBooleantrue/false (是否禁用状态)falseiconString图标类名-autofocusBooleantrue/false (是否默认聚焦)falsenative-typeStringbutton / submit / reset (原生 type 属性)button
Message 消息提示
配置选项
属性类型可选值/说明默认值messageString消息文字-typeStringsuccess / warning / info / errorinfodurationNumber显示时间(毫秒)设为 0 则不会自动关闭3000showCloseBooleantrue/false (是否显示关闭按钮)falsecenterBooleantrue/false (文字是否居中)falseoffsetNumber距离窗口顶部的偏移量20groupingBooleantrue/false (合并内容相同的消息)false
MessageBox 弹框
配置选项
属性类型可选值/说明默认值titleString标题提示messageString消息正文内容-typeStringsuccess / warning / info / error-confirmButtonTextString确认按钮文本确定cancelButtonTextString取消按钮文本取消showCancelButtonBooleantrue/false (是否显示取消按钮)falseshowConfirmButtonBooleantrue/false (是否显示确认按钮)truecloseOnClickModalBooleantrue/false (是否可通过点击遮罩关闭)truecloseOnPressEscapeBooleantrue/false (是否可通过 ESC 键关闭)truecenterBooleantrue/false (内容是否居中)false
Notification 通知
配置选项
属性类型可选值/说明默认值titleString标题-messageString消息文字-typeStringsuccess / warning / info / error-durationNumber显示时间(毫秒)设为 0 则不会自动关闭4500positionStringtop-right / top-left / bottom-right / bottom-lefttop-rightoffsetNumber距离窗口顶部的偏移量0showCloseBooleantrue/false (是否显示关闭按钮)true
