前端笔记-Element-Plus

结束了vue的基础学习，现在进一步学习组件

Element-Plus部分学习目标： 

Element Plus	1、查阅官方文档指南
	2、学习常用组件的使用方法
	3、Table、Pagination、Form
	4、Input、Input Number、Switch、Select、Date Picker、Button
	5、Message、MessageBox、Notification

查阅官方文档： 快速开始 | Element Plus

具体内容官网讲解的很清楚，这里只根据学习目标，以及以后可能常用的部分做总结，学习理解的话还是建议大家直接去看官方文档。

Table 表格组件  Table 表格 | Element Plus

常用属性

属性	类型	可选值/说明	默认值
data	Array	表格数据数组	[]
border	Boolean	true/false (是否显示边框)	false
stripe	Boolean	true/false (是否显示斑马纹)	false
height	String/Number	固定高度，如 '400px'	-
max-height	String/Number	最大高度	-
size	String	medium / small / mini (表格尺寸)	-
fit	Boolean	true/false (列宽是否自撑开)	true
show-header	Boolean	true/false (是否显示表头)	true
highlight-current-row	Boolean	true/false (是否高亮当前行)	false

Table-column 属性

属性	类型	可选值/说明	默认值
prop	String	对应列内容的字段名	-
label	String	显示的标题	-
width	String/Number	列宽度	-
min-width	String/Number	最小列宽	-
fixed	String/Boolean	true/false/'left'/'right' (固定列)	-
sortable	Boolean/String	true/false/'custom' (是否可排序)	false
align	String	left/center/right (对齐方式)	left
header-align	String	left/center/right (表头对齐方式)	-

Pagination 分页组件  Pagination 分页 | Element Plus

常用属性

属性	类型	可选值/说明	默认值
current-page	Number	当前页码	1
page-size	Number	每页显示条目数	10
total	Number	总条目数	-
page-sizes	Array	[10, 20, 30, 40, 50, 100] (每页显示个数选择器的选项设置)	[10, 20, 30, 50, 100]
layout	String	组件布局，可用值： sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
background	Boolean	true/false (是否为分页按钮添加背景色)	false
small	Boolean	true/false (是否使用小型分页样式)	false

Form 表单组件

常用属性

属性	类型	可选值/说明	默认值
model	Object	表单数据对象	-
rules	Object	表单验证规则	-
label-position	String	right/left/top (表单域标签的位置)	right
label-width	String/Number	表单域标签的宽度	-
size	String	medium / small / mini (控制表单内组件尺寸)	-
disabled	Boolean	true/false (是否禁用表单中所有组件)	false
inline	Boolean	true/false (行内表单模式)	false
show-message	Boolean	true/false (是否显示校验错误信息)	true

Form-item 属性

属性	类型	可选值/说明	默认值
prop	String	表单域 model 字段	-
label	String	标签文本	-
label-width	String/Number	标签宽度	-
required	Boolean	true/false (是否必填)	false
rules	Object/Array	表单验证规则	-
size	String	medium / small / mini (控制组件尺寸)	-

Input 输入框

常用属性

属性	类型	可选值/说明	默认值
type	String	text / textarea / password / number / email / url	text
size	String	medium / small / mini (输入框尺寸)	-
maxlength	Number	最大输入长度	-
minlength	Number	最小输入长度	-
show-word-limit	Boolean	true/false (是否显示输入字数统计)	false
clearable	Boolean	true/false (是否可清空)	false
show-password	Boolean	true/false (是否显示切换密码图标)	false
disabled	Boolean	true/false (是否禁用)	false
prefix-icon	String	输入框头部图标类名	-
suffix-icon	String	输入框尾部图标类名	-

Select 选择器

常用属性

属性	类型	可选值/说明	默认值
multiple	Boolean	true/false (是否多选)	false
disabled	Boolean	true/false (是否禁用)	false
clearable	Boolean	true/false (是否可以清空选项)	false
filterable	Boolean	true/false (是否可搜索)	false
remote	Boolean	true/false (是否为远程搜索)	false
loading	Boolean	true/false (是否正在从远程获取数据)	false
size	String	medium / small / mini (选择器尺寸)	-
collapse-tags	Boolean	true/false (多选时是否将选中值按文字的形式展示)	false

Option 属性

属性	类型	可选值/说明	默认值
value	String/Number/Boolean/Object	选项的值	-
label	String/Number	选项的标签	-
disabled	Boolean	true/false (是否禁用该选项)	false

Date Picker 日期选择器

常用属性

属性	类型	可选值/说明	默认值
type	String	year/month/date/dates/datetime/datetimerange/daterange/monthrange	date
format	String	显示在输入框中的格式，如 'yyyy-MM-dd'	-
value-format	String	绑定值的格式	-
placeholder	String	占位文本	-
range-separator	String	选择范围时的分隔符	'-'
start-placeholder	String	范围选择时开始日期的占位内容	-
end-placeholder	String	范围选择时结束日期的占位内容	-
disabled	Boolean	true/false (是否禁用)	false
clearable	Boolean	true/false (是否显示清除按钮)	true
size	String	medium / small / mini (输入框尺寸)	-

Button 按钮

常用属性

属性	类型	可选值/说明	默认值
type	String	primary / success / warning / danger / info / text	-
size	String	medium / small / mini (按钮尺寸)	-
plain	Boolean	true/false (是否朴素按钮)	false
round	Boolean	true/false (是否圆角按钮)	false
circle	Boolean	true/false (是否圆形按钮)	false
loading	Boolean	true/false (是否加载中状态)	false
disabled	Boolean	true/false (是否禁用状态)	false
icon	String	图标类名	-
autofocus	Boolean	true/false (是否默认聚焦)	false
native-type	String	button / submit / reset (原生 type 属性)	button

Message 消息提示

配置选项

属性	类型	可选值/说明	默认值
message	String	消息文字	-
type	String	success / warning / info / error	info
duration	Number	显示时间(毫秒)，设为 0 则不会自动关闭	3000
showClose	Boolean	true/false (是否显示关闭按钮)	false
center	Boolean	true/false (文字是否居中)	false
offset	Number	距离窗口顶部的偏移量	20
grouping	Boolean	true/false (合并内容相同的消息)	false

MessageBox 弹框

配置选项

属性	类型	可选值/说明	默认值
title	String	标题	'提示'
message	String	消息正文内容	-
type	String	success / warning / info / error	-
confirmButtonText	String	确认按钮文本	'确定'
cancelButtonText	String	取消按钮文本	'取消'
showCancelButton	Boolean	true/false (是否显示取消按钮)	false
showConfirmButton	Boolean	true/false (是否显示确认按钮)	true
closeOnClickModal	Boolean	true/false (是否可通过点击遮罩关闭)	true
closeOnPressEscape	Boolean	true/false (是否可通过 ESC 键关闭)	true
center	Boolean	true/false (内容是否居中)	false

Notification 通知

配置选项

属性	类型	可选值/说明	默认值
title	String	标题	-
message	String	消息文字	-
type	String	success / warning / info / error	-
duration	Number	显示时间(毫秒)，设为 0 则不会自动关闭	4500
position	String	top-right / top-left / bottom-right / bottom-left	top-right
offset	Number	距离窗口顶部的偏移量	0
showClose	Boolean	true/false (是否显示关闭按钮)	true