結束了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