Element-UI參數與注意事項

本文轉載自查看原文 2020-08-18 00:19 891 WEB前端/ element-ui

詳細內容，見官方文檔：element-ui文檔

1.布局

置頂：標簽內屬性（Attributes）的使用方式為：

<el-row :gutter = "6">；

<el-button type="primary">；

分欄偏移：

    <el-row :gutter="20">
      <el-col :span="6" ><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :span="12" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

效果圖如下：

注意了offset表示的是從左邊開始偏，偏移的位置是從span剩下的24份中的幾分，按照百分比來偏移的。

比如

響應式布局：

  <el-row :gutter="10">
    <el-col :xs="8" :sm="6" :md="4" :lg="3" ><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" ><div class="grid-content bg-purple-dark"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" ><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="8" :sm="6" :md="4" :lg="3" ><div class="grid-content bg-purple-dark"></div></el-col>
  </el-row>

上面有四個屬性，xs、sm、md、lg它們的作用分別是：

xs：瀏覽器窗口寬度最小時顯示的比例；
sm：瀏覽器窗口寬度較小時顯示的比例；
md：瀏覽器窗口寬度中等時顯示的比例；
lg：瀏覽器窗口寬度最大時顯示的比例；

可以通過調節這四個屬性的比例數來決定瀏覽器不同寬度下的布局；

不一定四個屬性都要加，看需要多少中響應式支持。

Row Attributes

參數	說明	類型	可選值	默認值
:gutter	柵格間隔	number	—	0
type	布局模式，可選 flex，現代瀏覽器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	top
tag	自定義元素標簽	string	*	div

Col Attributes

參數	說明	類型	可選值	默認值
:span	柵格占據的列數	number	—	24
:offset	柵格左側的間隔格數	number	—	0
push	柵格向右移動格數	number	—	0
pull	柵格向左移動格數	number	—	0
:xs	`<768px` 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
:sm	`≥768px` 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
:md	`≥992px` 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
:lg	`≥1200px` 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
:xl	`≥1920px` 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
tag	自定義元素標簽	string	*	div

2.看文檔的注意事項

如上圖所示，這里的參數是寫在標簽內的屬性：

<el-row type="flex" class="row-bg">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<el-row :gutter="20" class="row-bg">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

如上述代碼所示，這里的屬性有兩種寫法：

動態綁定屬性值：（:gutter="20"）；
直接寫：（type）；

具體那種才是正確的使用方式，參照文檔；

3.Container 布局容器

注意看如下布局：

代碼為：

<el-container>  								<!-- 第1層容器 -->
  <el-header>Header</el-header> 				<!-- 第2層容器，並列header -->
  <el-container> 								<!-- 第2層容器 -->
    <el-aside width="200px">Aside</el-aside> 	<!-- 第3層容器，並列aside -->
    <el-container> 								<!-- 第3層容器 -->
      <el-main>Main</el-main>					<!-- 第3層容器內main -->
      <el-footer>Footer</el-footer>				<!-- 第3層容器內footer -->
    </el-container>
  </el-container>
</el-container>

也就是說，element-ui是按行分容器的；原則是：大於一個部分的內容都使用一個容器包裹

首先，整個頁面用一個容器包起來；
然后，可以分為header和header之外兩個部分；
header之外部分用一個容器（container）存放，也就是第二層容器。
第二層容器內可分為aside和aside之外部分。所以可以將aside之外部分放入一個容器中，也就是第三層容器；
第三層容器內放入main和footer兩個部分。

Container Attributes

參數	說明	類型	可選值	默認值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有 `el-header` 或 `el-footer` 時為 vertical，否則為 horizontal

Header Attributes

參數	說明	類型	可選值	默認值
height	頂欄高度	string	—	60px

Aside Attributes

參數	說明	類型	可選值	默認值
width	側邊欄寬度	string	—	300px

參數	說明	類型	可選值	默認值
height	底欄高度	string	—	60px

4.按鈕button

按鈕的屬性對照表：

Attributes

參數	說明	類型	可選值	默認值
size	尺寸	string	medium / small / mini	—
type	類型	string	primary / success / warning / danger / info / text	—
plain	是否朴素按鈕	boolean	—	false
round	是否圓形按鈕	boolean	—	false
:loading	是否加載中狀態	boolean	—	false
disabled	是否禁用狀態	boolean	—	false
icon	圖標類名	string	—	—
autofocus	是否默認聚焦	boolean	—	false
native-type	原生 type 屬性	string	button / submit / reset	button

5.單選框

<template>
  <el-radio v-model="radio" label="1">備選項</el-radio>
  <el-radio v-model="radio" label="2">備選項</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

表示兩個el-radio控件都綁定了data中的radio值，並且這個值可以通過每個el-radio上的label屬性指定；當選中某一個el-radio時，它的label值與data中的radio值同步；

Radio Attributes

參數	說明	類型	可選值	默認值
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否顯示邊框	boolean	—	false
size	Radio 的尺寸，僅在 border 為真時有效	string	medium / small / mini	—
name	原生 name 屬性	string	—	—

label屬性寫法不能混用

注意事項：兩種綁定屬性的寫法不能混用。

使用label="你好棒"，這種方式時雙引號里面可以是除了數字的其他字符串；

使用:label="4"，這種方式雙引號里面只能是數字，這樣寫：:label="錯誤"是錯誤的；

這里說的只是label屬性不能兩種寫法混用，但是其他標簽的其他屬性就不一定了。

Radio Events

事件名稱	說明	回調參數
change	綁定值變化時觸發的事件	選中的 Radio label 值

Radio-group Attributes

參數	說明	類型	可選值	默認值
size	單選框組尺寸，僅對按鈕形式的 Radio 或帶有邊框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按鈕形式的 Radio 激活時的文本顏色	string	—	#ffffff
fill	按鈕形式的 Radio 激活時的填充色和邊框色	string	—	#409EFF

Radio-group Events

事件名稱	說明	回調參數
change	綁定值變化時觸發的事件	選中的 Radio label 值

Radio-button Attributes

參數	說明	類型	可選值	默認值
label	Radio 的 value	string / number	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 屬性	string	—	—

6.多選框

多選框組

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="復選框 A"></el-checkbox>
    <el-checkbox label="復選框 B"></el-checkbox>
    <el-checkbox label="復選框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="選中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['選中且禁用','復選框 A']
      };
    }
  };
</script>

整個el-checkbox-group綁定checkList，里面的el-checkbox選中了它的label值就會添加到data中的checkList中。

Checkbox Attributes

參數	說明	類型	可選值	默認值
(:)label	選中狀態的值（只有在`checkbox-group`或者綁定對象類型為`array`時有效）	string / number / boolean	—	—
true-label	選中時的值	string / number	—	—
false-label	沒有選中時的值	string / number	—	—
(:)disabled	是否禁用	boolean	—	false
border	是否顯示邊框	boolean	—	false
size	Checkbox 的尺寸，僅在 border 為真時有效	string	medium / small / mini	—
name	原生 name 屬性	string	—	—
checked	當前是否勾選	boolean	—	false
:indeterminate	設置 indeterminate 狀態，只負責樣式控制	boolean	—	false

(:)label表示存在兩種寫法：label和:label。

Checkbox Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	更新后的值

Checkbox-group Attributes

參數	說明	類型	可選值	默認值
size	多選框組尺寸，僅對按鈕形式的 Checkbox 或帶有邊框的 Checkbox 有效	string	medium / small / mini	—
(:)disabled	是否禁用	boolean	—	false
:min	可被勾選的 checkbox 的最小數量	number	—	—
:max	可被勾選的 checkbox 的最大數量	number	—	—
text-color	按鈕形式的 Checkbox 激活時的文本顏色	string	—	#ffffff
fill	按鈕形式的 Checkbox 激活時的填充色和邊框色	string	—	#409EFF

Checkbox-group Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	更新后的值

Checkbox-button Attributes

參數	說明	類型	可選值	默認值
(:)label	選中狀態的值（只有在`checkbox-group`或者綁定對象類型為`array`時有效）	string / number / boolean	—	—
true-label	選中時的值	string / number	—	—
false-label	沒有選中時的值	string / number	—	—
(:)disabled	是否禁用	boolean	—	false
name	原生 name 屬性	string	—	—
checked	當前是否勾選	boolean	—	false

小規律

有沒有發現，凡是Attribute的值為數字（number）或者布爾值（boolean）的都可以采用兩種寫法：

disabled和:disabled。

7.Input 輸入框

Input Attributes

參數	說明	類型	可選值	默認值
type	類型	string	text / textarea	text
value	綁定值	string / number	—	—
maxlength	最大輸入長度	number	—	—
minlength	最小輸入長度	number	—	—
placeholder	輸入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
:disabled	禁用	boolean	—	false
size	輸入框尺寸，只在 `type!="textarea"` 時有效	string	medium / small / mini	—
prefix-icon	輸入框頭部圖標	string	—	—
suffix-icon	輸入框尾部圖標	string	—	—
:rows	輸入框高度(不是行數限制)，只對 `type="textarea"` 有效	number	—	2
(:)autosize	自適應內容高度，只對 `type="textarea"` 有效，可傳入對象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
auto-complete	原生屬性，自動補全	string	on, off	off
name	原生屬性	string	—	—
readonly	原生屬性，是否只讀	boolean	—	false
max	原生屬性，設置最大值	—	—	—
min	原生屬性，設置最小值	—	—	—
step	原生屬性，設置輸入字段的合法數字間隔	—	—	—
resize	控制是否能被用戶縮放	string	none, both, horizontal, vertical	—
autofocus	原生屬性，自動獲取焦點	boolean	true, false	false
form	原生屬性	string	—	—
label	輸入框關聯的label文字	string	—	—
tabindex	輸入框的tabindex	string	-	-

Input slots

name	說明
prefix	輸入框頭部內容，只對 `type="text"` 有效
suffix	輸入框尾部內容，只對 `type="text"` 有效
prepend	輸入框前置內容，只對 `type="text"` 有效
append	輸入框后置內容，只對 `type="text"` 有效

Input Events

事件名稱	說明	回調參數
blur	在 Input 失去焦點時觸發	(event: Event)
focus	在 Input 獲得焦點時觸發	(event: Event)
change	在 Input 值改變時觸發	(value: string \| number)

Input Methods

方法名	說明	參數
focus	使 input 獲取焦點	-

Autocomplete Attributes

參數	說明	類型	可選值	默認值
placeholder	輸入框占位文本	string	—	—
disabled	禁用	boolean	—	false
valueKey	輸入建議對象中用於顯示的鍵名	string	—	value
value	必填值，輸入綁定值	string	—	—
debounce	獲取輸入建議的去抖延時	number	—	300
:fetch-suggestions	返回輸入建議的方法，僅當你的輸入建議數據 resolve 時，通過調用 callback(data:[]) 來返回它	Function(queryString, callback)	—	—
popper-class	Autocomplete 下拉列表的類名	string	—	—
(:)trigger-on-focus	是否在輸入框 focus 時顯示建議列表	boolean	—	true
name	原生屬性	string	—	—
select-when-unmatched	在輸入沒有任何匹配建議的情況下，按下回車是否觸發 `select` 事件	boolean	—	false
label	輸入框關聯的label文字	string	—	—
prefix-icon	輸入框頭部圖標	string	—	—
suffix-icon	輸入框尾部圖標	string	—	—

再次小規律

當Attribute的值為Number或者Boolean時，可以采用了兩種寫法disabled和:disabled。

並且，值為Boolean時，disabled === disableed=“true”，只有當為false時才需要顯式聲明。

Autocomplete slots

name	說明
prefix	輸入框頭部內容
suffix	輸入框尾部內容
prepend	輸入框前置內容
append	輸入框后置內容

Autocomplete Events

事件名稱	說明	回調參數
select	點擊選中建議項時觸發	選中建議項

8.InputNumber計數器

Attributes

參數	說明	類型	可選值	默認值
value	綁定值	number	—	—
:min	設置計數器允許的最小值	number	—	0
:max	設置計數器允許的最大值	number	—	Infinity
:step	計數器步長	number	—	1
size	計數器尺寸	string	large, small	—
disabled	是否禁用計數器	boolean	—	false
controls	是否使用控制按鈕	boolean	—	true
debounce	輸入時的去抖延遲，毫秒	number	—	300
controls-position	控制按鈕位置	string	right	-
name	原生屬性	string	—	—
label	輸入框關聯的label文字	string	—	—

小規律

所以，即使沒有特殊標明可以使用:寫法的屬性，只要它的屬性值為Number或者Boolean類型，都可以使用兩種屬性寫法。再不放心，實驗一下也是可以的。

Events

事件名稱	說明	回調參數
change	綁定值被改變時觸發	最后變更的值
blur	在組件 Input 失去焦點時觸發	(event: Event)
focus	在組件 Input 獲得焦點時觸發	(event: Event)

Methods

方法名	說明	參數
focus	使 input 獲取焦點	-

9.Select選擇器

Select Attributes

參數	說明	類型	可選值	默認值
multiple	是否多選	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作為 value 唯一標識的鍵名，綁定值為對象類型時必填	string	—	value
size	輸入框尺寸	string	large/small/mini	—
clearable	單選時是否可以清空選項	boolean	—	false
collapse-tags	多選時是否將選中值按文字的形式展示	boolean	—	false
multiple-limit	多選時用戶最多可以選擇的項目數，為 0 則不限制	number	—	0
name	select input 的 name 屬性	string	—	—
placeholder	占位符	string	—	請選擇
filterable	是否可搜索	boolean	—	false
allow-create	是否允許用戶創建新條目，需配合 `filterable` 使用	boolean	—	false
filter-method	自定義搜索方法	function	—	—
remote	是否為遠程搜索	boolean	—	false
remote-method	遠程搜索方法	function	—	—
loading	是否正在從遠程獲取數據	boolean	—	false
loading-text	遠程加載時顯示的文字	string	—	加載中
no-match-text	搜索條件無匹配時顯示的文字	string	—	無匹配數據
no-data-text	選項為空時顯示的文字	string	—	無數據
popper-class	Select 下拉框的類名	string	—	—
reserve-keyword	多選且可搜索時，是否在選中一個選項后保留當前的搜索關鍵詞	boolean	—	false
default-first-option	在輸入框按下回車，選擇第一個匹配項。需配合 `filterable` 或 `remote` 使用	boolean	-	false

Select Events

事件名稱	說明	回調參數
change	選中值發生變化時觸發	目前的選中值
visible-change	下拉框出現/隱藏時觸發	出現則為 true，隱藏則為 false
remove-tag	多選模式下移除tag時觸發	移除的tag值
clear	可清空的單選模式下用戶點擊清空按鈕時觸發	—
blur	當 input 失去焦點時觸發	(event: Event)
focus	當 input 獲得焦點時觸發	(event: Event)

Option Group Attributes

參數	說明	類型	可選值	默認值
label	分組的組名	string	—	—
disabled	是否將該分組下所有選項置為禁用	boolean	—	false

Option Attributes

參數	說明	類型	可選值	默認值
value	選項的值	string/number/object	—	—
label	選項的標簽，若不設置則默認與 `value` 相同	string/number	—	—
disabled	是否禁用該選項	boolean	—	false

Methods

方法名	說明	參數
focus	使 input 獲取焦點	-

10.Cascader級聯選擇器

Attributes

參數	說明	類型	可選值	默認值
:options	可選項數據源，鍵名可通過 `props` 屬性配置	array	—	—
:props	配置選項，具體見下表	object	—	—
value	選中項綁定值	array	—	—
separator	選項分隔符	string	—	斜杠'/'
popper-class	自定義浮層類名	string	—	—
placeholder	輸入框占位文本	string	—	請選擇
disabled	是否禁用	boolean	—	false
clearable	是否支持清空選項	boolean	—	false
expand-trigger	次級菜單的展開方式	string	click / hover	click
:show-all-levels	輸入框中是否顯示選中值的完整路徑	boolean	—	true
filterable	是否可搜索選項	boolean	—	—
debounce	搜索關鍵詞輸入的去抖延遲，毫秒	number	—	300
change-on-select	是否允許選擇任意一級的選項	boolean	—	false
size	尺寸	string	medium / small / mini	—
before-filter	篩選之前的鈎子，參數為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選	function(value)	—	—

props

參數	說明	類型	可選值	默認值
value	指定選項的值為選項對象的某個屬性值	string	—	—
label	指定選項標簽為選項對象的某個屬性值	string	—	—
children	指定選項的子選項為選項對象的某個屬性值	string	—	—
disabled	指定選項的禁用為選項對象的某個屬性值	string	—	—

Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	當前值
active-item-change	當父級選項變化時觸發的事件，僅在 `change-on-select` 為 `false` 時可用	各父級選項組成的數組

11.Switch開關

Attributes

參數	說明	類型	可選值	默認值
disabled	是否禁用	boolean	—	false
width	switch 的寬度（像素）	number	—	40
active-icon-class	switch 打開時所顯示圖標的類名，設置此項會忽略 `active-text`	string	—	—
inactive-icon-class	switch 關閉時所顯示圖標的類名，設置此項會忽略 `inactive-text`	string	—	—
active-text	switch 打開時的文字描述	string	—	—
inactive-text	switch 關閉時的文字描述	string	—	—
active-value	switch 打開時的值	boolean / string / number	—	true
inactive-value	switch 關閉時的值	boolean / string / number	—	false
active-color	switch 打開時的背景色	string	—	#409EFF
inactive-color	switch 關閉時的背景色	string	—	#C0CCDA
name	switch 對應的 name 屬性	string	—	—

Events

事件名稱	說明	回調參數
change	switch 狀態發生變化時的回調函數	新狀態的值

Methods

方法名	說明	參數
focus	使 Switch 獲取焦點	-

12.Slider滑塊

Attributes

參數	說明	類型	可選值	默認值
min	最小值	number	—	0
max	最大值	number	—	100
disabled	是否禁用	boolean	—	false
step	步長	number	—	1
show-input	是否顯示輸入框，僅在非范圍選擇時有效	boolean	—	false
show-input-controls	在顯示輸入框的情況下，是否顯示輸入框的控制按鈕	boolean	—	true
show-stops	是否顯示間斷點	boolean	—	false
:show-tooltip	是否顯示 tooltip	boolean	—	true
format-tooltip	格式化 tooltip message	function(value)	—	—
range	是否為范圍選擇	boolean	—	false
vertical	是否豎向模式	boolean	—	false
height	Slider 高度，豎向模式時必填	string	—	—
label	屏幕閱讀器標簽	string	—	—
debounce	輸入時的去抖延遲，毫秒，僅在`show-input`等於true時有效	number	—	300

小訣竅

屬性值凡是Number或者Boolean類型的都可以采用兩種寫法。之后將不會為這些屬性一一注明了。

Events

事件名稱	說明	回調參數
change	值改變時觸發（使用鼠標拖曳時，只在松開鼠標后觸發）	改變后的值

12.TimePicker時間選擇器

Attributes

參數	說明	類型	可選值	默認值
readonly	完全只讀	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可輸入	boolean	—	true
clearable	是否顯示清除按鈕	boolean	—	true
size	輸入框尺寸	string	medium / small / mini	—
placeholder	非范圍選擇時的占位內容	string	—	—
start-placeholder	范圍選擇時開始日期的占位內容	string	—	—
end-placeholder	范圍選擇時開始日期的占位內容	string	—	—
is-range	是否為時間范圍選擇，僅對`<el-time-picker>`有效	boolean	—	false
arrow-control	是否使用箭頭進行時間選擇，僅對`<el-time-picker>`有效	boolean	—	false
value	綁定值	date(TimePicker) / string(TimeSelect)	—	—
align	對齊方式	string	left / center / right	left
popper-class	TimePicker 下拉框的類名	string	—	—
picker-options	當前時間日期選擇器特有的選項參考下表	object	—	{}
range-separator	選擇范圍時的分隔符	string	-	'-'
value-format	可選，僅TimePicker時可用，綁定值的格式，同DatePicker	string	小時 `HH`，分 `mm`，秒 `ss`，AM/PM `A`	—
default-value	可選，選擇器打開時默認顯示的時間	Date(TimePicker) / string(TimeSelect)	可被`new Date()`解析(TimePicker) / 可選值(TimeSelect)	—
name	原生屬性	string	—	—

Time Select Options

參數	說明	類型	可選值	默認值
start	開始時間	string	—	09:00
end	結束時間	string	—	18:00
step	間隔時間	string	—	00:30
minTime	最小時間，小於該時間的時間段將被禁用	string	—	00:00
maxTime	最大時間，大於該時間的時間段將被禁用	string	—	—

Time Picker Options

參數	說明	類型	可選值	默認值
selectableRange	可選時間段，例如`'18:30:00 - 20:30:00'`或者傳入數組`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']`	string / array	—	—
format	時間格式化(TimePicker)	string	小時：`HH`，分：`mm`，秒：`ss`，AM/PM `A`	'HH:mm:ss'

Events

事件名	說明	參數
change	用戶確認選定的值時觸發	組件綁定值
blur	當 input 失去焦點時觸發	組件實例
focus	當 input 獲得焦點時觸發	組件實例

Methods

方法名	說明	參數
focus	使 input 獲取焦點	-

13.DatePicker 日期選擇器

Attributes

參數	說明	類型	可選值	默認值
readonly	完全只讀	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可輸入	boolean	—	true
clearable	是否顯示清除按鈕	boolean	—	true
size	輸入框尺寸	string	large, small, mini	—
placeholder	非范圍選擇時的占位內容	string	—	—
start-placeholder	范圍選擇時開始日期的占位內容	string	—	—
end-placeholder	范圍選擇時結束日期的占位內容	string	—	—
time-arrow-control	是否使用箭頭進行時間選擇	boolean	—	false
type	顯示類型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	顯示在輸入框中的格式	string	年 `yyyy`，月 `MM`，日 `dd`，小時 `HH`，分 `mm`，秒 `ss`，AM/PM `A`	yyyy-MM-dd
align	對齊方式	string	left, center, right	left
popper-class	DateTimePicker 下拉框的類名	string	—	—
picker-options	當前時間日期選擇器特有的選項參考下表	object	—	{}
range-separator	選擇范圍時的分隔符	string	-	'-'
default-value	可選，選擇器打開時默認顯示的時間	Date	可被`new Date()`解析	—
value-format	可選，綁定值的格式。不指定則綁定值為 Date 對象	string	年 `yyyy`，月 `MM`，日 `dd`，小時 `HH`，分 `mm`，秒 `ss`，AM/PM `A`	—
name	原生屬性	string	—	—
unlink-panels	在范圍選擇器里取消兩個日期面板之間的聯動	boolean	—	false

Picker Options

參數	說明	類型	可選值	默認值
shortcuts	設置快捷選項，需要傳入 { text, onClick } 對象用法參考 demo 或下表	Object[]	—	—
disabledDate	設置禁用狀態，參數為當前日期，要求返回 Boolean	Function	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7

Shortcuts

參數	說明	類型	可選值	默認值
text	標題文本	string	—	—
onClick	選中后的回調函數，參數是 vm，可通過觸發 'pick' 事件設置選擇器的值。例如 vm.$emit('pick', new Date())	function	—	—

Events

Event Name	Description	Parameters
change	用戶確認選定的值時觸發	組件綁定值。格式與綁定值一致，可受 `value-format` 控制
blur	當 input 失去焦點時觸發	組件實例
focus	當 input 獲得焦點時觸發	組件實例

Methods

方法名	說明	參數
focus	使 input 獲取焦點	—

14.Upload上傳

Attribute

參數	說明	類型	可選值	默認值
action	必選參數，上傳的地址	string	—	—
headers	設置上傳的請求頭部	object	—	—
multiple	是否支持多選文件	boolean	—	—
data	上傳時附帶的額外參數	object	—	—
name	上傳的文件字段名	string	—	file
with-credentials	支持發送 cookie 憑證信息	boolean	—	false
show-file-list	是否顯示已上傳文件列表	boolean	—	true
drag	是否啟用拖拽上傳	boolean	—	false
accept	接受上傳的文件類型（thumbnail-mode 模式下此參數無效）	string	—	—
on-preview	點擊已上傳的文件鏈接時的鈎子, 可以通過 file.response 拿到服務端返回數據	function(file)	—	—
on-remove	文件列表移除文件時的鈎子	function(file, fileList)	—	—
on-success	文件上傳成功時的鈎子	function(response, file, fileList)	—	—
on-error	文件上傳失敗時的鈎子	function(err, file, fileList)	—	—
on-progress	文件上傳時的鈎子	function(event, file, fileList)	—	—
on-change	文件狀態改變時的鈎子，添加文件、上傳成功和上傳失敗時都會被調用	function(file, fileList)	—	—
before-upload	上傳文件之前的鈎子，參數為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。	function(file)	—	—
before-remove	刪除文件之前的鈎子，參數為上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則停止上傳。	function(file, fileList)	—	—
list-type	文件列表的類型	string	text/picture/picture-card	text
auto-upload	是否在選取文件后立即進行上傳	boolean	—	true
file-list	上傳的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
http-request	覆蓋默認的上傳行為，可以自定義上傳的實現	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允許上傳個數	number	—	—
on-exceed	文件超出個數限制時的鈎子	function(files, fileList)	—	-

Methods

方法名	說明	參數
clearFiles	清空已上傳的文件列表（該方法不支持在 before-upload 中調用）	—
abort	取消上傳請求	（ file: fileList 中的 file 對象）

15.Rate評分

Attributes

參數	說明	類型	可選值	默認值
max	最大分值	number	—	5
disabled	是否為只讀	boolean	—	false
allow-half	是否允許半選	boolean	—	false
low-threshold	低分和中等分數的界限值，值本身被划分在低分中	number	—	2
high-threshold	高分和中等分數的界限值，值本身被划分在高分中	number	—	4
colors	icon 的顏色數組，共有 3 個元素，為 3 個分段所對應的顏色	array	—	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	未選中 icon 的顏色	string	—	#C6D1DE
disabled-void-color	只讀時未選中 icon 的顏色	string	—	#EFF2F7
icon-classes	icon 的類名數組，共有 3 個元素，為 3 個分段所對應的類名	array	—	['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class	未選中 icon 的類名	string	—	el-icon-star-off
disabled-void-icon-class	只讀時未選中 icon 的類名	string	—	el-icon-star-on
show-text	是否顯示輔助文字，若為真，則會從 texts 數組中選取當前分數對應的文字內容	boolean	—	false
show-score	是否顯示當前分數，show-score 和 show-text 不能同時為真	boolean	—	false
text-color	輔助文字的顏色	string	—	#1F2D3D
texts	輔助文字數組	array	—	['極差', '失望', '一般', '滿意', '驚喜']
score-template	分數顯示模板	string	—	{value}

Events

事件名稱	說明	回調參數
change	分值改變時觸發	改變后的分值

16.ColorPicker 顏色選擇器

Attributes

參數	說明	類型	可選值	默認值
disabled	是否禁用	boolean	—	false
size	尺寸	string	—	medium / small / mini
show-alpha	是否支持透明度選擇	boolean	—	false
color-format	寫入 v-model 的顏色的格式	string	hsl / hsv / hex / rgb	hex（show-alpha 為 false）/ rgb（show-alpha 為 true）
popper-class	ColorPicker 下拉框的類名	string	—	—

Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發	當前值
active-change	面板中當前顯示的顏色發生改變時觸發	當前顯示的顏色值

17.transfer穿梭框

有點難啊。

Attributes

參數	說明	類型	可選值	默認值
data	Transfer 的數據源	array[{ key, label, disabled }]	—	[ ]
filterable	是否可搜索	boolean	—	false
filter-placeholder	搜索框占位符	string	—	請輸入搜索內容
filter-method	自定義搜索方法	function	—	—
titles	自定義列表標題	array	—	['列表 1', '列表 2']
button-texts	自定義按鈕文案	array	—	[ ]
render-content	自定義數據項渲染函數	function(h, option)	—	—
format	列表頂部勾選狀態文案	object{noChecked, hasChecked}	—	{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
props	數據源的字段別名	object{key, label, disabled}	—	—
left-default-checked	初始狀態下左側列表的已勾選項的 key 數組	array	—	[ ]
right-default-checked	初始狀態下右側列表的已勾選項的 key 數組	array	—	[ ]

Slot

name	說明
left-footer	左側列表底部的內容
right-footer	右側列表底部的內容

Events

事件名稱	說明	回調參數
change	右側列表元素變化時觸發	當前值、數據移動的方向（'left' / 'right'）、發生移動的數據 key 數組

18.Form表單

Form Attributes

參數	說明	類型	可選值	默認值
model	表單數據對象	object	—	—
rules	表單驗證規則	object	—	—
inline	行內表單模式	boolean	—	false
label-position	表單域標簽的位置	string	right/left/top	right
label-width	表單域標簽的寬度，作為 Form 直接子元素的 form-item 會繼承該值	string	—	—
label-suffix	表單域標簽的后綴	string	—	—
show-message	是否顯示校驗錯誤信息	boolean	—	true
inline-message	是否以行內形式展示校驗信息	boolean	—	false
status-icon	是否在輸入框中顯示校驗結果反饋圖標	boolean	—	false
size	用於控制該表單內組件的尺寸	string	medium / small / mini	-

Form Methods

方法名	說明	參數
validate	對整個表單進行校驗的方法。若不傳入回調函數，則會返回一個 promise	Function(callback: Function(boolean))
validateField	對部分表單字段進行校驗的方法	Function(prop: string, callback: Function(errorMessage: string))
resetFields	對整個表單進行重置，將所有字段值重置為初始值並移除校驗結果	-
clearValidate	移除整個表單的校驗結果	-

Form-Item Attributes

參數	說明	類型	可選值	默認值
prop	表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的	string	傳入 Form 組件的 `model` 中的字段	—
label	標簽文本	string	—	—
label-width	表單域標簽的的寬度，例如 '50px'	string	—	—
required	是否必填，如不設置，則會根據校驗規則自動生成	bolean	—	false
rules	表單驗證規則	object	—	—
error	表單域驗證錯誤信息, 設置該值會使表單驗證狀態變為`error`，並顯示該錯誤信息	string	—	—
show-message	是否顯示校驗錯誤信息	boolean	—	true
inline-message	以行內形式展示校驗信息	boolean	—	false
size	用於控制該表單域下組件的尺寸	string	medium / small / mini	-

Form-Item Slot

name	說明
—	Form Item 的內容
label	標簽文本的內容

Form-Item Methods

方法名	說明	參數
resetField	對該表單項進行重置，將其值重置為初始值並移除校驗結果	-

19.Table 表格

Table Attributes

參數	說明	類型	可選值	默認值
data	顯示的數據	array	—	—
height	Table 的高度，默認為自動高度。如果 height 為 number 類型，單位 px；如果 height 為 string 類型，則 Table 的高度受控於外部樣式。	string/number	—	—
max-height	Table 的最大高度	string/number	—	—
stripe	是否為斑馬紋 table	boolean	—	false
border	是否帶有縱向邊框	boolean	—	false
size	Table 的尺寸	string	medium / small / mini	—
fit	列的寬度是否自撐開	boolean	—	true
show-header	是否顯示表頭	boolean	—	true
highlight-current-row	是否要高亮當前行	boolean	—	false
current-row-key	當前行的 key，只寫屬性	String,Number	—	—
row-class-name	行的 className 的回調方法，也可以使用字符串為所有行設置一個固定的 className。	Function({row, rowIndex})/String	—	—
row-style	行的 style 的回調方法，也可以使用一個固定的 Object 為所有行設置一樣的 Style。	Function({row, rowIndex})/Object	—	—
cell-class-name	單元格的 className 的回調方法，也可以使用字符串為所有單元格設置一個固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—	—
cell-style	單元格的 style 的回調方法，也可以使用一個固定的 Object 為所有單元格設置一樣的 Style。	Function({row, column, rowIndex, columnIndex})/Object	—	—
header-row-class-name	表頭行的 className 的回調方法，也可以使用字符串為所有表頭行設置一個固定的 className。	Function({row, rowIndex})/String	—	—
header-row-style	表頭行的 style 的回調方法，也可以使用一個固定的 Object 為所有表頭行設置一樣的 Style。	Function({row, rowIndex})/Object	—	—
header-cell-class-name	表頭單元格的 className 的回調方法，也可以使用字符串為所有表頭單元格設置一個固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—	—
header-cell-style	表頭單元格的 style 的回調方法，也可以使用一個固定的 Object 為所有表頭單元格設置一樣的 Style。	Function({row, rowIndex, rowIndex, columnIndex})/Object	—	—
row-key	行數據的 Key，用來優化 Table 的渲染；在使用 reserve-selection 功能的情況下，該屬性是必填的。類型為 String 時，支持多層訪問：`user.info.id`，但不支持 `user.info[0].id`，此種情況請使用 `Function`。	Function(row)/String	—	—
empty-text	空數據時顯示的文本內容，也可以通過 `slot="empty"` 設置	String	—	暫無數據
default-expand-all	是否默認展開所有行，當 Table 中存在 type="expand" 的 Column 的時候有效	Boolean	—	false
expand-row-keys	可以通過該屬性設置 Table 目前的展開行，需要設置 row-key 屬性才能使用，該屬性為展開行的 keys 數組。	Array	—
default-sort	默認的排序列的prop和順序。它的`prop`屬性指定默認的排序的列，`order`指定默認排序的順序	Object	`order`: ascending, descending	如果只指定了`prop`, 沒有指定`order`, 則默認順序是ascending
tooltip-effect	tooltip `effect` 屬性	String	dark/light
show-summary	是否在表尾顯示合計行	Boolean	—	false
sum-text	合計行第一列的文本	String	—	合計
summary-method	自定義的合計計算方法	Function({ columns, data })	—	—
span-method	合並行或列的計算方法	Function({ row, column, rowIndex, columnIndex })	—	—

Table Events

事件名	說明	參數
select	當用戶手動勾選數據行的 Checkbox 時觸發的事件	selection, row
select-all	當用戶手動勾選全選 Checkbox 時觸發的事件	selection
selection-change	當選擇項發生變化時會觸發該事件	selection
cell-mouse-enter	當單元格 hover 進入時會觸發該事件	row, column, cell, event
cell-mouse-leave	當單元格 hover 退出時會觸發該事件	row, column, cell, event
cell-click	當某個單元格被點擊時會觸發該事件	row, column, cell, event
cell-dblclick	當某個單元格被雙擊擊時會觸發該事件	row, column, cell, event
row-click	當某一行被點擊時會觸發該事件	row, event, column
row-contextmenu	當某一行被鼠標右鍵點擊時會觸發該事件	row, event
row-dblclick	當某一行被雙擊時會觸發該事件	row, event
header-click	當某一列的表頭被點擊時會觸發該事件	column, event
sort-change	當表格的排序條件發生變化的時候會觸發該事件	{ column, prop, order }
filter-change	當表格的篩選條件發生變化的時候會觸發該事件，參數的值是一個對象，對象的 key 是 column 的 columnKey，對應的 value 為用戶選擇的篩選條件的數組。	filters
current-change	當表格的當前行發生變化的時候會觸發該事件，如果要高亮當前行，請打開表格的 highlight-current-row 屬性	currentRow, oldCurrentRow
header-dragend	當拖動表頭改變了列的寬度的時候會觸發該事件	newWidth, oldWidth, column, event
expand-change	當用戶對某一行展開或者關閉的時候會觸發該事件	row, expandedRows

Table Methods

方法名	說明	參數
clearSelection	用於多選表格，清空用戶的選擇，當使用 reserve-selection 功能的時候，可能會需要使用此方法	selection
toggleRowSelection	用於多選表格，切換某一行的選中狀態，如果使用了第二個參數，則是設置這一行選中與否（selected 為 true 則選中）	row, selected
toggleRowExpansion	用於可展開表格，切換某一行的展開狀態，如果使用了第二個參數，則是設置這一行展開與否（expanded 為 true 則展開）	row, expanded
setCurrentRow	用於單選表格，設定某一行為選中行，如果調用時不加參數，則會取消目前高亮行的選中狀態。	row
clearSort	用於清空排序條件，數據會恢復成未排序的狀態	—
clearFilter	用於清空過濾條件，數據會恢復成未過濾的狀態	—
doLayout	對 Table 進行重新布局。當 Table 或其祖先元素由隱藏切換為顯示時，可能需要調用此方法	—

Table Slot

name	說明
append	插入至表格最后一行之后的內容，如果需要對表格的內容進行無限滾動操作，可能需要用到這個 slot。若表格有合計行，該 slot 會位於合計行之上。

Table-column Attributes

參數	說明	類型	可選值	默認值
type	對應列的類型。如果設置了 `selection` 則顯示多選框；如果設置了 `index` 則顯示該行的索引（從 1 開始計算）；如果設置了 `expand` 則顯示為一個可展開的按鈕	string	selection/index/expand	—
index	如果設置了 `type=index`，可以通過傳遞 `index` 屬性來自定義索引	string, Function(index)	-	-
column-key	column 的 key，如果需要使用 filter-change 事件，則需要此屬性標識是哪個 column 的篩選條件	string	—	—
label	顯示的標題	string	—	—
prop	對應列內容的字段名，也可以使用 property 屬性	string	—	—
width	對應列的寬度	string	—	—
min-width	對應列的最小寬度，與 width 的區別是 width 是固定的，min-width 會把剩余寬度按比例分配給設置了 min-width 的列	string	—	—
fixed	列是否固定在左側或者右側，true 表示固定在左側	string, boolean	true, left, right	—
render-header	列標題 Label 區域渲染使用的 Function	Function(h, { column, $index })	—	—
sortable	對應列是否可以排序，如果設置為 'custom'，則代表用戶希望遠程排序，需要監聽 Table 的 sort-change 事件	boolean, string	true, false, 'custom'	false
sort-method	對數據進行排序的時候使用的方法，僅當 sortable 設置為 true 的時候有效，需返回一個數字，和 Array.sort 表現一致	Function(a, b)	—	—
sort-by	指定數據按照哪個屬性進行排序，僅當 sortable 設置為 true 且沒有設置 sort-method 的時候有效。如果 sort-by 為數組，則先按照第 1 個屬性排序，如果第 1 個相等，再按照第 2 個排序，以此類推。	String/Array/Function(row, index)	—	—
resizable	對應列是否可以通過拖動改變寬度（需要在 el-table 上設置 border 屬性為真）	boolean	—	true
formatter	用來格式化內容	Function(row, column, cellValue)	—	—
show-overflow-tooltip	當內容過長被隱藏時顯示 tooltip	Boolean	—	false
align	對齊方式	String	left/center/right	left
header-align	表頭對齊方式，若不設置該項，則使用表格的對齊方式	String	left/center/right	—
class-name	列的 className	string	—	—
label-class-name	當前列標題的自定義類名	string	—	—
selectable	僅對 type=selection 的列有效，類型為 Function，Function 的返回值用來決定這一行的 CheckBox 是否可以勾選	Function(row, index)	—	—
reserve-selection	僅對 type=selection 的列有效，類型為 Boolean，為 true 則代表會保留之前數據的選項，需要配合 Table 的 clearSelection 方法使用。	Boolean	—	false
filters	數據過濾的選項，數組格式，數組中的元素需要有 text 和 value 屬性。	Array[{ text, value }]	—	—
filter-placement	過濾彈出框的定位	String	與 Tooltip 的 `placement` 屬性相同	—
filter-multiple	數據過濾的選項是否多選	Boolean	—	true
filter-method	數據過濾使用的方法，如果是多選的篩選項，對每一條數據會執行多次，任意一次返回 true 就會顯示。	Function(value, row)	—	—
filtered-value	選中的數據過濾項，如果需要自定義表頭過濾的渲染方式，可能會需要此屬性。	Array	—	—

20.Tag 標簽

Attributes

參數	說明	類型	可選值	默認值
type	主題	string	success/info/warning/danger	—
closable	是否可關閉	boolean	—	false
disable-transitions	是否禁用漸變動畫	boolean	—	false
hit	是否有邊框描邊	boolean	—	false
color	背景色	string	—	—
size	尺寸	string	medium / small / mini	—

Events

事件名稱	說明	回調參數
close	關閉 Tag 時觸發的事件	—

21.Progress進度條

Attributes

參數	說明	類型	可選值	默認值
percentage	百分比（必填）	number	0-100	0
type	進度條類型	string	line/circle	line
stroke-width	進度條的寬度，單位 px	number	—	6
text-inside	進度條顯示文字內置在進度條內（只在 type=line 時可用）	Boolean	—	false
status	進度條當前狀態	string	success/exception	—
width	環形進度條畫布寬度（只在 type=circle 時可用）	number		126
show-text	是否顯示進度條文字內容	boolean	—	true

22.Tree樹形控件

Attributes

參數	說明	類型	可選值	默認值
data	展示數據	array	—	—
empty-text	內容為空的時候展示的文本	String	—	—
node-key	每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的	String	—	—
props	配置選項，具體看下表	object	—	—
render-after-expand	是否在第一次展開某個樹節點后才渲染其子節點	boolean	—	true
load	加載子樹數據的方法	function(node, resolve)	—	—
render-content	樹節點的內容區的渲染 Function	Function(h, { node, data, store }	—	—
highlight-current	是否高亮當前選中節點，默認值是 false。	boolean	—	false
default-expand-all	是否默認展開所有節點	boolean	—	false
expand-on-click-node	是否在點擊節點的時候展開或者收縮節點，默認值為 true，如果為 false，則只有點箭頭圖標的時候才會展開或者收縮節點。	boolean	—	true
auto-expand-parent	展開子節點的時候是否自動展開父節點	boolean	—	true
default-expanded-keys	默認展開的節點的 key 的數組	array	—	—
show-checkbox	節點是否可被選擇	boolean	—	false
check-strictly	在顯示復選框的情況下，是否嚴格的遵循父子不互相關聯的做法，默認為 false	boolean	—	false
default-checked-keys	默認勾選的節點的 key 的數組	array	—	—
filter-node-method	對樹節點進行篩選時執行的方法，返回 true 表示這個節點可以顯示，返回 false 則表示這個節點會被隱藏	Function(value, data, node)	—	—
accordion	是否每次只打開一個同級樹節點展開	boolean	—	false
indent	相鄰級節點間的水平縮進，單位為像素	number	—	16

props

參數	說明	類型	可選值	默認值
label	指定節點標簽為節點對象的某個屬性值	string, function(data, node)	—	—
children	指定子樹為節點對象的某個屬性值	string, function(data, node)	—	—
disabled	指定節點選擇框是否禁用為節點對象的某個屬性值	boolean, function(data, node)	—	—
isLeaf	指定節點是否為葉子節點	boolean, function(data, node)	—	—

方法

Tree 擁有如下方法，返回目前被選中的節點數組：

方法名	說明	參數
filter	對樹節點進行篩選操作	接收一個任意類型的參數，該參數會在 filter-node-method 中作為第一個參數
updateKeyChildren	通過 keys 設置節點子元素，使用此方法必須設置 node-key 屬性	(key, data) 接收兩個參數，1. 節點 key 2. 節點數據的數組
getCheckedNodes	若節點可被選擇（即 `show-checkbox` 為 `true`），則返回目前被選中的節點所組成的數組	(leafOnly) 接收一個 boolean 類型的參數，若為 `true` 則僅返回被選中的葉子節點，默認值為 `false`
setCheckedNodes	設置目前勾選的節點，使用此方法必須設置 node-key 屬性	(nodes) 接收勾選節點數據的數組
getCheckedKeys	若節點可被選擇（即 `show-checkbox` 為 `true`），則返回目前被選中的節點所組成的數組	(leafOnly) 接收一個 boolean 類型的參數，若為 `true` 則僅返回被選中的葉子節點的 keys，默認值為 `false`
setCheckedKeys	通過 keys 設置目前勾選的節點，使用此方法必須設置 node-key 屬性	(keys, leafOnly) 接收兩個參數，1. 勾選節點的 key 的數組 2. boolean 類型的參數，若為 `true` 則僅設置葉子節點的選中狀態，默認值為 `false`
setChecked	通過 key / data 設置某個節點的勾選狀態，使用此方法必須設置 node-key 屬性	(key/data, checked, deep) 接收三個參數，1. 勾選節點的 key 或者 data 2. boolean 類型，節點是否選中 3. boolean 類型，是否設置子節點，默認為 false
getCurrentKey	獲取當前被選中節點的 key，使用此方法必須設置 node-key 屬性，若沒有節點被選中則返回 null	—
getCurrentNode	獲取當前被選中節點的 node，若沒有節點被選中則返回 null	—
setCurrentKey	通過 key 設置某個節點的當前選中狀態，使用此方法必須設置 node-key 屬性	(key) 待被選節點的 key
setCurrentNode	通過 node 設置某個節點的當前選中狀態，使用此方法必須設置 node-key 屬性	(node) 待被選節點的 node

Events

事件名稱	說明	回調參數
node-click	節點被點擊時的回調	共三個參數，依次為：傳遞給 `data` 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件本身。
check-change	節點選中狀態發生變化時的回調	共三個參數，依次為：傳遞給 `data` 屬性的數組中該節點所對應的對象、節點本身是否被選中、節點的子樹中是否有被選中的節點
current-change	當前選中節點變化時觸發的事件	共兩個參數，依次為：當前節點的數據，當前節點的 Node 對象
node-expand	節點被展開時觸發的事件	共三個參數，依次為：傳遞給 `data` 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件本身。
node-collapse	節點被關閉時觸發的事件	共三個參數，依次為：傳遞給 `data` 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件本身。

23.Pagination分頁

Attributes

參數	說明	類型	可選值	默認值
small	是否使用小型分頁樣式	Boolean	—	false
background	是否為分頁按鈕添加背景色	Boolean	—	false
page-size	每頁顯示條目個數	Number	—	10
total	總條目數	Number	—	—
page-count	總頁數，total 和 page-count 設置任意一個就可以達到顯示頁碼的功能；如果要支持 page-sizes 的更改，則需要使用 total 屬性	Number	—	—
current-page	當前頁數，支持 .sync 修飾符	Number	—	1
layout	組件布局，子組件名用逗號分隔	String	`sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`	'prev, pager, next, jumper, ->, total'
page-sizes	每頁顯示個數選擇器的選項設置	Number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每頁顯示個數選擇器的下拉框類名	string	—	—
prev-text	替代圖標顯示的上一頁文字	string	—	—
next-text	替代圖標顯示的下一頁文字	string	—	—

Events

事件名稱	說明	回調參數
size-change	pageSize 改變時會觸發	每頁條數`size`
current-change	currentPage 改變時會觸發	當前頁`currentPage`

Slot

name	說明
—	自定義內容，需要在 `layout` 中列出 `slot`

24.Badge 標記

Attributes

參數	說明	類型	可選值	默認值
value	顯示值	string, number	—	—
max	最大值，超過最大值會顯示 '{max}+'，要求 value 是 Number 類型	number	—	—
is-dot	小圓點	boolean	—	false
hidden	隱藏 badge	boolean	—	false

25.Alert 警告

Attributes

參數	說明	類型	可選值	默認值
title	標題，必選參數	string	—	—
type	主題	string	success/warning/info/error	info
description	輔助性文字。也可通過默認 slot 傳入	string	—	—
closable	是否可關閉	boolean	—	true
center	文字是否居中	boolean	—	true
close-text	關閉按鈕自定義文本	string	—	—
show-icon	是否顯示圖標	boolean	—	false

Events

事件名稱	說明	回調參數
close	關閉alert時觸發的事件	—

26.Loading加載

Options

參數	說明	類型	可選值	默認值
target	Loading 需要覆蓋的 DOM 節點。可傳入一個 DOM 對象或字符串；若傳入字符串，則會將其作為參數傳入 `document.querySelector`以獲取到對應 DOM 節點	object/string	—	document.body
body	同 `v-loading` 指令中的 `body` 修飾符	boolean	—	false
fullscreen	同 `v-loading` 指令中的 `fullscreen` 修飾符	boolean	—	true
lock	同 `v-loading` 指令中的 `lock` 修飾符	boolean	—	false
text	顯示在加載圖標下方的加載文案	string	—	—
spinner	自定義加載圖標類名	string	—	—
background	遮罩背景色	string	—	—
customClass	Loading 的自定義類名	string	—	—

27.Message消息提示

Options

參數	說明	類型	可選值	默認值
message	消息文字	string / VNode	—	—
type	主題	string	success/warning/info/error	info
iconClass	自定義圖標的類名，會覆蓋 `type`	string	—	—
dangerouslyUseHTMLString	是否將 message 屬性作為 HTML 片段處理	boolean	—	false
customClass	自定義類名	string	—	—
duration	顯示時間, 毫秒。設為 0 則不會自動關閉	number	—	3000
showClose	是否顯示關閉按鈕	boolean	—	false
center	文字是否居中	boolean	—	false
onClose	關閉時的回調函數, 參數為被關閉的 message 實例	function	—	—

方法

調用 Message 或 this.$message 會返回當前 Message 的實例。如果需要手動關閉實例，可以調用它的 close 方法。

方法名	說明
close	關閉當前的 Message

28.MessageBox彈框

Options

參數	說明	類型	可選值	默認值
title	MessageBox 標題	string	—	—
message	MessageBox 消息正文內容	string / VNode	—	—
dangerouslyUseHTMLString	是否將 message 屬性作為 HTML 片段處理	boolean	—	false
type	消息類型，用於顯示圖標	string	success / info / warning / error	—
customClass	MessageBox 的自定義類名	string	—	—
callback	若不使用 Promise，可以使用此參數指定 MessageBox 關閉后的回調	function(action, instance)，action 的值為'confirm'或'cancel', instance 為 MessageBox 實例，可以通過它訪問實例上的屬性和方法	—	—
showClose	MessageBox 是否顯示右上角關閉按鈕	boolean	—	true
beforeClose	MessageBox 關閉前的回調，會暫停實例的關閉	function(action, instance, done)，action 的值為'confirm'或'cancel'；instance 為 MessageBox 實例，可以通過它訪問實例上的屬性和方法；done 用於關閉 MessageBox 實例	—	—
lockScroll	是否在 MessageBox 出現時將 body 滾動鎖定	boolean	—	true
showCancelButton	是否顯示取消按鈕	boolean	—	false（以 confirm 和 prompt 方式調用時為 true）
showConfirmButton	是否顯示確定按鈕	boolean	—	true
cancelButtonText	取消按鈕的文本內容	string	—	取消
confirmButtonText	確定按鈕的文本內容	string	—	確定
cancelButtonClass	取消按鈕的自定義類名	string	—	—
confirmButtonClass	確定按鈕的自定義類名	string	—	—
closeOnClickModal	是否可通過點擊遮罩關閉 MessageBox	boolean	—	true（以 alert 方式調用時為 false）
closeOnPressEscape	是否可通過按下 ESC 鍵關閉 MessageBox	boolean	—	true（以 alert 方式調用時為 false）
closeOnHashChange	是否在 hashchange 時關閉 MessageBox	boolean	—	true
showInput	是否顯示輸入框	boolean	—	false（以 prompt 方式調用時為 true）
inputPlaceholder	輸入框的占位符	string	—	—
inputType	輸入框的類型	string	—	text
inputValue	輸入框的初始文本	string	—	—
inputPattern	輸入框的校驗表達式	regexp	—	—
inputValidator	輸入框的校驗函數。可以返回布爾值或字符串，若返回一個字符串, 則返回結果會被賦值給 inputErrorMessage	function	—	—
inputErrorMessage	校驗未通過時的提示文本	string	—	輸入的數據不合法!
center	是否居中布局	boolean	—	false
roundButton	是否使用圓角按鈕	boolean	—	false

29.Notification通知

Options

參數	說明	類型	可選值	默認值
title	標題	string	—	—
message	說明文字	string/Vue.VNode	—	—
dangerouslyUseHTMLString	是否將 message 屬性作為 HTML 片段處理	boolean	—	false
type	主題樣式，如果不在可選值內將被忽略	string	success/warning/info/error	—
iconClass	自定義圖標的類名。若設置了 `type`，則 `iconClass` 會被覆蓋	string	—	—
customClass	自定義類名	string	—	—
duration	顯示時間, 毫秒。設為 0 則不會自動關閉	number	—	4500
position	自定義彈出位置	string	top-right/top-left/bottom-right/bottom-left	top-right
showClose	是否顯示關閉按鈕	boolean	—	true
onClose	關閉時的回調函數	function	—	—
onClick	點擊 Notification 時的回調函數	function	—	—
offset	偏移的距離，在同一時刻，所有的 Notification 實例應當具有一個相同的偏移量	number	—	0

方法

調用 Notification 或 this.$notify 會返回當前 Notification 的實例。如果需要手動關閉實例，可以調用它的 close 方法。

方法名	說明
close	關閉當前的 Notification

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 easy UI 注意事項 element-UI dropdown 傳多個參數 VS開發Qt與純Qt在ui文件的注意事項 minio 注意事項 currentRowChanged 的注意事項 FiddlerCore注意事項 onReachBottom 注意事項 java中對象引用，特別作為參數時候注意事項 Java中可變長參數的使用及注意事項 python定義函數時默認參數注意事項