一。basic基礎元件
Button 按鈕
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| size | 尺寸 | string | medium / small / mini | — |
| type | 型別 | string | primary / success / warning / danger / info / text | — |
| plain | 是否樸素按鈕 | boolean | — | false |
| round | 是否圓角按鈕 | boolean | — | false |
| circle | 是否圓形按鈕 | boolean | — | false |
| loading | 是否載入中狀態 | boolean | — | false |
| disabled | 是否禁用狀態 | boolean | — | false |
| icon | 圖示類名 | string | — | — |
| autofocus | 是否預設聚焦 | boolean | — | false |
| native-type | 原生 type 屬性 | string | button / submit / reset | button |
Link 文字連結
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ———————— | ———————————————— | ————- | —————————————————— | ————- |
| type | 型別 | string | primary / success / warning / danger / info | default |
| underline | 是否下劃線 | boolean | — | true |
| disabled | 是否禁用狀態 | boolean | — | false |
| href | 原生 href 屬性 | string | — | - |
| icon | 圖示類名 | string | — | - |
二。Form 表單
Radio 單選框
### Radio Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | string / number / boolean | — | — |
| label | Radio 的 value | string / number / boolean | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否顯示邊框 | boolean | — | false |
| size | Radio 的尺寸，僅在 border 為真時有效 | string | medium / small / mini | — |
| name | 原生 name 屬性 | string | — | — |
### Radio Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 繫結值變化時觸發的事件 | 選中的 Radio label 值 |
### Radio-group Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | string / number / boolean | — | — |
| 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 | — | — |
Checkbox 多選框
### Checkbox Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | string / number / boolean | — | — |
| 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 |
### Checkbox Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 當繫結值變化時觸發的事件 | 更新後的值 |
### Checkbox-group Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | array | — | — |
| 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 |
Input 輸入框
### Input Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| type | 型別 | string | text，textarea 和其他 ［原生 input 的 type 值］（https：//developer。mozilla。org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types） | text |
| value / v-model | 繫結值 | string / number | — | — |
| maxlength | 原生屬性，最大輸入長度 | number | — | — |
| minlength | 原生屬性，最小輸入長度 | number | — | — |
| show-word-limit | 是否顯示輸入字數統計，只在 `type = “text”` 或 `type = “textarea”` 時有效 | boolean | — | false |
| placeholder | 輸入框佔位文字 | string | — | — |
| clearable | 是否可清空 | boolean | — | false |
| show-password | 是否顯示切換密碼圖示| 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 |
| autocomplete | 原生屬性，自動補全 | string | on， off | off |
| 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 | - | - |
| validate-event | 輸入時是否觸發表單的校驗 | boolean | - | true |
### 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 | 僅在輸入框失去焦點或使用者按下回車時觸發 | （value： string \| number） |
| input | 在 Input 值改變時觸發 | （value： string \| number） |
| clear | 在點選由 `clearable` 屬性生成的清空按鈕時觸發 | — |
### Input Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| focus | 使 input 獲取焦點 | — |
| blur | 使 input 失去焦點 | — |
| select | 選中 input 中的文字 | — |
### Autocomplete Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| placeholder | 輸入框佔位文字 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| value-key | 輸入建議物件中用於顯示的鍵名 | string | — | value |
| value | 必填值，輸入繫結值 | string | — | — |
| debounce | 獲取輸入建議的去抖延時 | number | — | 300 |
| placement | 選單彈出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
| 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 | — | — |
| hide-loading | 是否隱藏遠端載入時的載入圖示 | boolean | — | false |
| popper-append-to-body | 是否將下拉列表插入至 body 元素。在下拉列表的定位出現問題時，可將該屬性設定為 false | boolean | - | true |
| highlight-first-item | 是否預設突出顯示遠端搜尋建議中的第一項 | boolean | — | false |
### Autocomplete Slots
| name | 說明 |
|————|————|
| prefix | 輸入框頭部內容 |
| suffix | 輸入框尾部內容 |
| prepend | 輸入框前置內容 |
| append | 輸入框後置內容 |
### Autocomplete Scoped Slot
| name | 說明 |
|————|————|
| — | 自定義輸入建議，引數為 { item } |
### Autocomplete Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————|————-|
| select | 點選選中建議項時觸發 | 選中建議項 |
| change | 在 Input 值改變時觸發 | （value： string \| number） |
### Autocomplete Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| focus | 使 input 獲取焦點 | - |
InputNumber 計數器
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————|———————— |——————|———————————————— |———— |
| value / v-model | 繫結值 | number | — | 0 |
| min | 設定計數器允許的最小值 | number | — | -Infinity |
| max | 設定計數器允許的最大值 | number | — | Infinity |
| step | 計數器步長 | number | — | 1 |
| step-strictly | 是否只能輸入 step 的倍數 | boolean | — | false |
| precision| 數值精度 | number | — | — |
| size | 計數器尺寸 | string | large， small | — |
| disabled | 是否禁用計數器 | boolean | — | false |
| controls | 是否使用控制按鈕 | boolean | — | true |
| controls-position | 控制按鈕位置 | string | right | - |
| name | 原生屬性 | string | — | — |
| label | 輸入框關聯的label文字 | string | — | — |
| placeholder | 輸入框預設 placeholder | string | - | - |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————|————-|
| change | 繫結值被改變時觸發 | currentValue， oldValue |
| blur | 在元件 Input 失去焦點時觸發 | （event： Event） |
| focus | 在元件 Input 獲得焦點時觸發 | （event： Event） |
### Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| focus | 使 input 獲取焦點 | - |
| select | 選中 input 中的文字 | — |
Select 選擇器
### Select Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value / v-model | 繫結值 | boolean / string / number | — | — |
| multiple | 是否多選 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| value-key | 作為 value 唯一標識的鍵名，繫結值為物件型別時必填 | string | — | value |
| size | 輸入框尺寸 | string | medium/small/mini | — |
| clearable | 是否可以清空選項 | boolean | — | false |
| collapse-tags | 多選時是否將選中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多選時使用者最多可以選擇的專案數，為 0 則不限制 | number | — | 0 |
| name | select input 的 name 屬性 | string | — | — |
| autocomplete | select input 的 autocomplete 屬性 | string | — | off |
| auto-complete | 下個主版本棄用 | string | — | off |
| 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 | 搜尋條件無匹配時顯示的文字，也可以使用`slot=“empty”`設定 | string | — | 無匹配資料 |
| no-data-text | 選項為空時顯示的文字，也可以使用`slot=“empty”`設定 | string | — | 無資料 |
| popper-class | Select 下拉框的類名 | string | — | — |
| reserve-keyword | 多選且可搜尋時，是否在選中一個選項後保留當前的搜尋關鍵詞 | boolean | — | false |
| default-first-option | 在輸入框按下回車，選擇第一個匹配項。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
| popper-append-to-body | 是否將彈出框插入至 body 元素。在彈出框的定位出現問題時，可將該屬性設定為 false | boolean | - | true |
| automatic-dropdown | 對於不可搜尋的 Select，是否在輸入框獲得焦點後自動彈出選項選單 | boolean | - | false |
### Select Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————-|————-|
| change | 選中值發生變化時觸發 | 目前的選中值 |
| visible-change | 下拉框出現/隱藏時觸發 | 出現則為 true，隱藏則為 false |
| remove-tag | 多選模式下移除tag時觸發 | 移除的tag值 |
| clear | 可清空的單選模式下使用者點選清空按鈕時觸發 | — |
| blur | 當 input 失去焦點時觸發 | （event： Event） |
| focus | 當 input 獲得焦點時觸發 | （event： Event） |
### Select Slots
| name | 說明 |
|————-|————-|
| — | Option 元件列表 |
| prefix | Select 元件頭部內容 |
| empty | 無選項時的列表 |
### Option Group Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| label | 分組的組名 | string | — | — |
| disabled | 是否將該分組下所有選項置為禁用 | boolean | — | false |
### Option Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value | 選項的值 | string/number/object | — | — |
| label | 選項的標籤，若不設定則預設與 `value` 相同 | string/number | — | — |
| disabled | 是否禁用該選項 | boolean | — | false |
### Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| focus | 使 input 獲取焦點 | - |
| blur | 使 input 失去焦點，並隱藏下拉框 | - |
Cascader 級聯選擇器
### Cascader Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 選中項繫結值 | - | — | — |
| options | 可選項資料來源，鍵名可透過 `Props` 屬性配置 | array | — | — |
| props | 配置選項，具體見下表 | object | — | — |
| size | 尺寸 | string | medium / small / mini | — |
| placeholder | 輸入框佔位文字 | string | — | 請選擇 |
| disabled | 是否禁用 | boolean | — | false |
| clearable | 是否支援清空選項 | boolean | — | false |
| show-all-levels | 輸入框中是否顯示選中值的完整路徑 | boolean | — | true |
| collapse-tags | 多選模式下是否摺疊Tag | boolean | - | false |
| separator | 選項分隔符 | string | — | 斜槓‘ / ’ |
| filterable | 是否可搜尋選項 | boolean | — | — |
| filter-method | 自定義搜尋邏輯，第一個引數是節點`node`，第二個引數是搜尋關鍵詞`keyword`，透過返回布林值表示是否命中 | function（node， keyword） | - | - |
| debounce | 搜尋關鍵詞輸入的去抖延遲，毫秒 | number | — | 300 |
| before-filter | 篩選之前的鉤子，引數為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選 | function（value） | — | — |
| popper-class | 自定義浮層類名 | string | — | — |
### Cascader Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 當選中節點變化時觸發 | 選中節點的值 |
| expand-change | 當展開節點發生變化時觸發 | 各父級選項值組成的陣列 |
| blur | 當失去焦點時觸發 | （event： Event） |
| focus | 當獲得焦點時觸發 | （event： Event） |
| visible-change | 下拉框出現/隱藏時觸發 | 出現則為 true，隱藏則為 false |
| remove-tag | 在多選模式下，移除Tag時觸發 | 移除的Tag對應的節點的值 |
### Cascader Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| getCheckedNodes | 獲取選中的節點 | （leafOnly） 是否只是葉子節點，預設值為 `false` |
### Cascader Slots
| 名稱 | 說明 |
|————-|——————-|
| - | 自定義備選項的節點內容，引數為 { node， data }，分別為當前節點的 Node 物件和資料 |
| empty | 無匹配選項時的內容 |
### CascaderPanel Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 選中項繫結值 | - | — | — |
| options | 可選項資料來源，鍵名可透過 `Props` 屬性配置 | array | — | — |
| props | 配置選項，具體見下表 | object | — | — |
### CascaderPanel Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 當選中節點變化時觸發 | 選中節點的值 |
| expand-change | 當展開節點發生變化時觸發 | 各父級選項值組成的陣列 |
### CascaderPanel Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| getCheckedNodes | 獲取選中的節點陣列 | （leafOnly） 是否只是葉子節點，預設值為 `false` |
| clearCheckedNodes | 清空選中的節點 | - |
### CascaderPanel Slots
| 名稱 | 說明 |
|————-|——————-|
| - | 自定義備選項的節點內容，引數為 { node， data }，分別為當前節點的 Node 物件和資料 |
### Props
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ———— | ————————- | ———— | ———— | ———— |
| expandTrigger | 次級選單的展開方式 | string | click / hover | ‘click’ |
| multiple | 是否多選 | boolean | - | false |
| checkStrictly | 是否嚴格的遵守父子節點不互相關聯 | boolean | - | false |
| emitPath | 在選中節點改變時，是否返回由該節點所在的各級選單的值所組成的陣列，若設定 false，則只返回該節點的值 | boolean | - | true |
| lazy | 是否動態載入子節點，需與 lazyLoad 方法結合使用 | boolean | - | false |
| lazyLoad | 載入動態資料的方法，僅在 lazy 為 true 時有效 | function（node， resolve），`node`為當前點選的節點，`resolve`為資料載入完成的回撥（必須呼叫） | - | - |
| value | 指定選項的值為選項物件的某個屬性值 | string | — | ‘value’ |
| label | 指定選項標籤為選項物件的某個屬性值 | string | — | ‘label’ |
| children | 指定選項的子選項為選項物件的某個屬性值 | string | — | ‘children’ |
| disabled | 指定選項的禁用為選項物件的某個屬性值 | string | — | ‘disabled’ |
| leaf | 指定選項的葉子節點的標誌位為選項物件的某個屬性值 | string | — | ‘leaf’ |
Switch 開關
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | boolean / string / number | — | — |
| 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 | — | — |
| validate-event | 改變 switch 狀態時是否觸發表單的校驗 | boolean | - | true |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | switch 狀態發生變化時的回撥函式 | 新狀態的值 |
### Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| focus | 使 Switch 獲取焦點 | - |
Slider 滑塊
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value / v-model | 繫結值 | number | — | 0 |
| min | 最小值 | number | — | 0 |
| max | 最大值 | number | — | 100 |
| disabled | 是否禁用 | boolean | — | false |
| step | 步長 | number | — | 1 |
| show-input | 是否顯示輸入框，僅在非範圍選擇時有效 | boolean | — | false |
| show-input-controls | 在顯示輸入框的情況下，是否顯示輸入框的控制按鈕 | boolean | — | true |
| input-size | 輸入框的尺寸 | string | large / medium / small / mini | small |
| 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 |
| tooltip-class | tooltip 的自定義類名 | string | — | — |
| marks | 標記， key 的型別必須為 number 且取值在閉區間 `［min， max］` 內，每個標記可以單獨設定樣式 | object | — | — |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 值改變時觸發（使用滑鼠拖曳時，只在鬆開滑鼠後觸發） | 改變後的值 |
| input | 資料改變時觸發（使用滑鼠拖曳時，活動過程實時觸發） | 改變後的值 |
TimePicker 時間選擇器
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value / v-model | 繫結值 | date（TimePicker） / string（TimeSelect） | — | — |
| 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 | 是否為時間範圍選擇，僅對`
| arrow-control | 是否使用箭頭進行時間選擇，僅對`
| align | 對齊方式 | string | left / center / right | left |
| popper-class | TimePicker 下拉框的類名 | string | — | — |
| picker-options | 當前時間日期選擇器特有的選項參考下表 | object | — | {} |
| range-separator | 選擇範圍時的分隔符 | string | - | ‘-’ |
| value-format | 可選，僅TimePicker時可用，繫結值的格式。不指定則繫結值為 Date 物件 | string | 見［日期格式］（#/zh-CN/component/date-picker#ri-qi-ge-shi） | — |
| default-value | 可選，選擇器開啟時預設顯示的時間 | Date（TimePicker） / string（TimeSelect） | 可被`new Date（）`解析（TimePicker） / 可選值（TimeSelect） | — |
| name | 原生屬性 | string | — | — |
| prefix-icon | 自定義頭部圖示的類名 | string | — | el-icon-time |
| clear-icon | 自定義清空圖示的類名 | string | — | el-icon-circle-close |
### 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 獲取焦點 | - |
DatePicker 日期選擇器
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value / v-model | 繫結值 | date（DatePicker） / array（DateRangePicker） | — | — |
| 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 | — | — |
| type | 顯示型別 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
| format | 顯示在輸入框中的格式 | string | 見［日期格式］（#/zh-CN/component/date-picker#ri-qi-ge-shi） | yyyy-MM-dd |
| align | 對齊方式 | string | left， center， right | left |
| popper-class | DatePicker 下拉框的類名 | string | — | — |
| picker-options | 當前時間日期選擇器特有的選項參考下表 | object | — | {} |
| range-separator | 選擇範圍時的分隔符 | string | — | ‘-’ |
| default-value | 可選，選擇器開啟時預設顯示的時間 | Date | 可被`new Date（）`解析 | — |
| default-time | 範圍選擇時選中日期所使用的當日內具體時刻 | string［］ | 陣列，長度為 2，每項值為字串，形如`12：00：00`，第一項指定開始日期的時刻，第二項指定結束日期的時刻，不指定會使用時刻 `00：00：00` | — |
| value-format | 可選，繫結值的格式。不指定則繫結值為 Date 物件 | string | 見［日期格式］（#/zh-CN/component/date-picker#ri-qi-ge-shi） | — |
| name | 原生屬性 | string | — | — |
| unlink-panels | 在範圍選擇器裡取消兩個日期面板之間的聯動 | boolean | — | false |
| prefix-icon | 自定義頭部圖示的類名 | string | — | el-icon-date |
| clear-icon | 自定義清空圖示的類名 | string | — | el-icon-circle-close |
| validate-event | 輸入時是否觸發表單的校驗 | boolean | - | true |
### Picker Options
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| shortcuts | 設定快捷選項，需要傳入 { text， onClick } 物件用法參考 demo 或下表 | Object［］ | — | — |
| disabledDate | 設定禁用狀態，引數為當前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 設定日期的 className | Function（Date） | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 選中日期後會執行的回撥，只有當 `daterange` 或 `datetimerange` 才生效 | Function（{ maxDate， minDate }） | — | — |
### Shortcuts
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| text | 標題文字 | string | — | — |
| onClick | 選中後的回撥函式，引數是 vm，可透過觸發 ‘pick’ 事件設定選擇器的值。例如 vm。$emit（‘pick’， new Date（）） | function | — | — |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————|————-|
| change | 使用者確認選定的值時觸發 | 元件繫結值。格式與繫結值一致，可受 `value-format` 控制 |
| blur | 當 input 失去焦點時觸發 | 元件例項 |
| focus | 當 input 獲得焦點時觸發 | 元件例項 |
### Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| focus | 使 input 獲取焦點 | — |
DateTimePicker 日期時間選擇器
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value / v-model | 繫結值 | date（DateTimePicker） / array（DateTimeRangePicker） | — | — |
| 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 | 見［日期格式］（#/zh-CN/component/date-picker#ri-qi-ge-shi） | yyyy-MM-dd HH：mm：ss |
| align | 對齊方式 | string | left， center， right | left |
| popper-class | DateTimePicker 下拉框的類名 | string | — | — |
| picker-options | 當前時間日期選擇器特有的選項參考下表 | object | — | {} |
| range-separator | 選擇範圍時的分隔符 | string | - | ‘-’ |
| default-value | 可選，選擇器開啟時預設顯示的時間 | Date | 可被`new Date（）`解析 | — |
| default-time | 選中日期後的預設具體時刻 | 非範圍選擇時：string / 範圍選擇時：string［］ | 非範圍選擇時：形如`12：00：00`的字串；範圍選擇時：陣列，長度為 2，每項值為字串，形如`12：00：00`，第一項指定開始日期的時刻，第二項指定結束日期的時刻。不指定會使用時刻 `00：00：00` | — |
| value-format | 可選，繫結值的格式。不指定則繫結值為 Date 物件 | string | 見［日期格式］（#/zh-CN/component/date-picker#ri-qi-ge-shi） | — |
| name | 原生屬性 | string | — | — |
| unlink-panels | 在範圍選擇器裡取消兩個日期面板之間的聯動 | boolean | — | false |
| prefix-icon | 自定義頭部圖示的類名 | string | — | el-icon-date |
| clear-icon | 自定義清空圖示的類名 | string | — | el-icon-circle-close |
### Picker Options
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| shortcuts | 設定快捷選項，需要傳入 { text， onClick } 物件用法參考 demo 或下表 | Object［］ | — | — |
| disabledDate | 設定禁用狀態，引數為當前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 設定日期的 className | Function（Date） | — | — |
| 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 獲取焦點 | — |
### Slots
| Name | 說明 |
|————-|——————-|
| range-separator | 自定義分隔符 |
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 | 接受上傳的［檔案型別］（https：//developer。mozilla。org/en-US/docs/Web/HTML/Element/input#attr-accept）（thumbnail-mode 模式下此引數無效）| string | — | — |
| on-preview | 點選檔案列表中已上傳的檔案時的鉤子 | 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） | — | - |
### Slot
| name | 說明 |
|————|————|
| trigger | 觸發檔案選擇框的內容 |
| tip | 提示說明文字 |
### Methods
| 方法名 | 說明 | 引數 |
|——————- |———————— | —— |
| clearFiles | 清空已上傳的檔案列表（該方法不支援在 before-upload 中呼叫） | — |
| abort | 取消上傳請求 | （ file： fileList 中的 file 物件 ） |
| submit | 手動上傳檔案列表 | — |
Rate 評分
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | number | — | 0 |
| max | 最大分值 | number | — | 5 |
| disabled | 是否為只讀 | boolean | — | false |
| allow-half | 是否允許半選 | boolean | — | false |
| low-threshold | 低分和中等分數的界限值，值本身被劃分在低分中 | number | — | 2 |
| high-threshold | 高分和中等分數的界限值，值本身被劃分在高分中 | number | — | 4 |
| colors | icon 的顏色。若傳入陣列，共有 3 個元素，為 3 個分段所對應的顏色；若傳入物件，可自定義分段，鍵名為分段的界限值，鍵值為對應的顏色 | array/object | — | ［‘#F7BA2A’， ‘#F7BA2A’， ‘#F7BA2A’］ |
| void-color | 未選中 icon 的顏色 | string | — | #C6D1DE |
| disabled-void-color | 只讀時未選中 icon 的顏色 | string | — | #EFF2F7 |
| icon-classes | icon 的類名。若傳入陣列，共有 3 個元素，為 3 個分段所對應的類名；若傳入物件，可自定義分段，鍵名為分段的界限值，鍵值為對應的類名 | array/object | — | ［‘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 | 分值改變時觸發 | 改變後的分值 |
ColorPicker 顏色選擇器
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | string | — | — |
| 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 | — | — |
| predefine | 預定義顏色 | array | — | — |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 當繫結值變化時觸發 | 當前值 |
| active-change | 面板中當前顯示的顏色發生改變時觸發 | 當前顯示的顏色值 |
Transfer 穿梭框
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值 | array | — | — |
| data | Transfer 的資料來源 | array［{ key， label， disabled }］ | — | ［ ］ |
| filterable | 是否可搜尋 | boolean | — | false |
| filter-placeholder | 搜尋框佔位符 | string | — | 請輸入搜尋內容 |
| filter-method | 自定義搜尋方法 | function | — | — |
| target-order | 右側列表元素的排序策略：若為 `original`，則保持與資料來源相同的順序；若為 `push`，則新加入的元素排在最後；若為 `unshift`，則新加入的元素排在最前 | string | original / push / unshift | original |
| 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 | 右側列表底部的內容 |
### Scoped Slot
| name | 說明 |
|————|————|
| — | 自定義資料項的內容，引數為 { option } |
### Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| clearQuery | 清空某個面板的搜尋關鍵詞 | ‘left’ / ‘right’，指定需要清空的面板 |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| change | 右側列表元素變化時觸發 | 當前值、資料移動的方向（‘left’ / ‘right’）、發生移動的資料 key 陣列 |
| left-check-change | 左側列表元素被使用者選中 / 取消選中時觸發 | 當前被選中的元素的 key 陣列、選中狀態發生變化的元素的 key 陣列 |
| right-check-change | 右側列表元素被使用者選中 / 取消選中時觸發 | 當前被選中的元素的 key 陣列、選中狀態發生變化的元素的 key 陣列 |
Form 表單
### Form Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| model | 表單資料物件 | object | — | — |
| rules | 表單驗證規則 | object | — | — |
| inline | 行內表單模式 | boolean | — | false |
| label-position | 表單域標籤的位置，如果值為 left 或者 right 時，則需要設定 `label-width` | string | right/left/top | right |
| label-width | 表單域標籤的寬度，例如 ‘50px’。作為 Form 直接子元素的 form-item 會繼承該值。支援 `auto`。 | string | — | — |
| label-suffix | 表單域標籤的字尾 | string | — | — |
| hide-required-asterisk | 是否顯示必填欄位的標籤旁邊的紅色星號 | boolean | — | false |
| show-message | 是否顯示校驗錯誤資訊 | boolean | — | true |
| inline-message | 是否以行內形式展示校驗資訊 | boolean | — | false |
| status-icon | 是否在輸入框中顯示校驗結果反饋圖示 | boolean | — | false |
| validate-on-rule-change | 是否在 `rules` 屬性改變後立即觸發一次驗證 | boolean | — | true |
| size | 用於控制該表單內元件的尺寸 | string | medium / small / mini | — |
| disabled | 是否禁用該表單內的所有元件。若設定為 true，則表單內元件上的 disabled 屬性不再生效 | boolean | — | false |
### Form Methods
| 方法名 | 說明 | 引數
|—————— |———————— | ————————
| validate | 對整個表單進行校驗的方法，引數為一個回撥函式。該回調函式會在校驗結束後被呼叫，並傳入兩個引數：是否校驗成功和未透過校驗的欄位。若不傳入回撥函式，則會返回一個 promise | Function（callback： Function（boolean， object））
| validateField | 對部分表單欄位進行校驗的方法 | Function（props： array \| string， callback： Function（errorMessage： string））
| resetFields | 對整個表單進行重置，將所有欄位值重置為初始值並移除校驗結果 | —
| clearValidate | 移除表單項的校驗結果。傳入待移除的表單項的 prop 屬性或者 prop 組成的陣列，如不傳則移除整個表單的校驗結果 | Function（props： array \| string）
### Form Events
| 事件名稱 | 說明 | 回撥引數 |
|————- |———— |—————— |
| validate | 任一表單項被校驗後觸發 | 被校驗的表單項 prop 值，校驗是否透過，錯誤訊息（如果存在） |
### Form-Item Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| prop | 表單域 model 欄位，在使用 validate、resetFields 方法的情況下，該屬性是必填的 | string | 傳入 Form 元件的 `model` 中的欄位 | — |
| label | 標籤文字 | string | — | — |
| label-width | 表單域標籤的的寬度，例如 ‘50px’。支援 `auto`。 | string | — | — |
| required | 是否必填，如不設定，則會根據校驗規則自動生成 | boolean | — | 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 Scoped Slot
| name | 說明 |
|————|————|
| error | 自定義表單校驗資訊的顯示方式，引數為 { error } |
### Form-Item Methods
| 方法名 | 說明 | 引數
|—————— |———————— | ————————
| resetField | 對該表單項進行重置，將其值重置為初始值並移除校驗結果 | -
| clearValidate | 移除該表單項的校驗結果 | -
三。data 資料
Table 表格
### Table Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| data | 顯示的資料 | array | — | — |
| height | Table 的高度，預設為自動高度。如果 height 為 number 型別，單位 px；如果 height 為 string 型別，則這個高度會設定為 Table 的 style。height 的值，Table 的高度會受控於外部樣式。 | string/number | — | — |
| max-height | Table 的最大高度。合法的值為數字或者單位為 px 的高度。 | 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， column， 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 包含展開行存在或者為樹形表格時有效 | 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 | | dark |
| show-summary | 是否在表尾顯示合計行 | Boolean | — | false |
| sum-text | 合計行第一列的文字 | String | — | 合計 |
| summary-method | 自定義的合計計算方法 | Function（{ columns， data }） | — | — |
| span-method | 合併行或列的計算方法 | Function（{ row， column， rowIndex， columnIndex }） | — | — |
| select-on-indeterminate | 在多選表格中，當僅有部分行被選中時，點選表頭的多選框時的行為。若為 true，則選中所有行；若為 false，則取消選擇所有行 | Boolean | — | true |
| indent | 展示樹形資料時，樹節點的縮排 | Number | — | 16 |
| lazy | 是否懶載入子節點資料 | Boolean | — | — |
| load | 載入子節點資料的函式，lazy 為 true 時生效，函式第二個引數包含了節點的層級資訊 | Function（row， treeNode， resolve） | — | — |
| tree-props | 渲染巢狀資料的配置選項 | Object | — | { hasChildren： ‘hasChildren’， children： ‘children’ } |
### 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， column， event |
| row-contextmenu | 當某一行被滑鼠右鍵點選時會觸發該事件 | row， column， event |
| row-dblclick | 當某一行被雙擊時會觸發該事件 | row， column， event |
| header-click | 當某一列的表頭被點選時會觸發該事件 | column， event |
| header-contextmenu | 當某一列的表頭被滑鼠右鍵點選時觸發該事件 | 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 | 當用戶對某一行展開或者關閉的時候會觸發該事件（展開行時，回撥的第二個引數為 expandedRows；樹形表格時第二引數為 expanded） | row， （expandedRows \| expanded） |
### Table Methods
| 方法名 | 說明 | 引數 |
| —— | —— | —— |
| clearSelection | 用於多選表格，清空使用者的選擇 | — |
| toggleRowSelection | 用於多選表格，切換某一行的選中狀態，如果使用了第二個引數，則是設定這一行選中與否（selected 為 true 則選中） | row， selected |
| toggleAllSelection | 用於多選表格，切換所有行的選中狀態 | - |
| toggleRowExpansion | 用於可展開表格與樹形表格，切換某一行的展開狀態，如果使用了第二個引數，則是設定這一行展開與否（expanded 為 true 則展開） | row， expanded |
| setCurrentRow | 用於單選表格，設定某一行為選中行，如果呼叫時不加引數，則會取消目前高亮行的選中狀態。 | row |
| clearSort | 用於清空排序條件，資料會恢復成未排序的狀態 | — |
| clearFilter | 不傳入引數時用於清空所有過濾條件，資料會恢復成未過濾的狀態，也可傳入由columnKey組成的陣列以清除指定列的過濾條件 | columnKey |
| doLayout | 對 Table 進行重新佈局。當 Table 或其祖先元素由隱藏切換為顯示時，可能需要呼叫此方法 | — |
| sort | 手動對 Table 進行排序。引數`prop`屬性指定排序列，`order`指定排序順序。 | prop： string， order： string |
### Table Slot
| name | 說明 |
|————|————|
| append | 插入至表格最後一行之後的內容，如果需要對錶格的內容進行無限滾動操作，可能需要用到這個 slot。若表格有合計行，該 slot 會位於合計行之上。 |
### Table-column Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| type | 對應列的型別。如果設定了 `selection` 則顯示多選框；如果設定了 `index` 則顯示該行的索引（從 1 開始計算）；如果設定了 `expand` 則顯示為一個可展開的按鈕 | string | selection/index/expand | — |
| index | 如果設定了 `type=index`，可以透過傳遞 `index` 屬性來自定義索引 | number， 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） | — | — |
| sort-orders | 資料在排序時所使用排序策略的輪轉順序，僅當 sortable 為 true 時有效。需傳入一個數組，隨著使用者點選表頭，該列依次按照陣列中元素的順序進行排序 | array | 陣列中的元素需為以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示還原為原始順序 | ［‘ascending’， ‘descending’， null］ |
| resizable | 對應列是否可以透過拖動改變寬度（需要在 el-table 上設定 border 屬性為真） | boolean | — | true |
| formatter | 用來格式化內容 | Function（row， column， cellValue， index） | — | — |
| 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 則會在資料更新之後保留之前選中的資料（需指定 `row-key`） | Boolean | — | false |
| filters | 資料過濾的選項，陣列格式，陣列中的元素需要有 text 和 value 屬性。 | Array［{ text， value }］ | — | — |
| filter-placement | 過濾彈出框的定位 | String | 與 Tooltip 的 `placement` 屬性相同 | — |
| filter-multiple | 資料過濾的選項是否多選 | Boolean | — | true |
| filter-method | 資料過濾使用的方法，如果是多選的篩選項，對每一條資料會執行多次，任意一次返回 true 就會顯示。 | Function（value， row， column） | — | — |
| filtered-value | 選中的資料過濾項，如果需要自定義表頭過濾的渲染方式，可能會需要此屬性。 | Array | — | — |
### Table-column Scoped Slot
| name | 說明 |
|————|————|
| — | 自定義列的內容，引數為 { row， column， $index } |
| header | 自定義表頭的內容。 引數為 { column， $index } |
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 | — |
| effect | 主題 | string | dark / light / plain | light |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| click | 點選 Tag 時觸發的事件 | — |
| close | 關閉 Tag 時觸發的事件 | — |
Progress 進度條
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 進度條型別 | string | line/circle/dashboard | line |
| stroke-width | 進度條的寬度，單位 px | number | — | 6 |
| text-inside | 進度條顯示文字內建在進度條內（只在 type=line 時可用） | boolean | — | false |
| status | 進度條當前狀態 | string | success/exception/warning | — |
| color | 進度條背景色（會覆蓋 status 狀態顏色） | string/function/array | — | ‘’ |
| width | 環形進度條畫布寬度（只在 type 為 circle 或 dashboard 時可用） | number | | 126 |
| show-text | 是否顯示進度條文字內容 | boolean | — | true |
| stroke-linecap | circle/dashboard 型別路徑兩端的形狀 | string | butt/round/square | round |
Tree 樹形控制元件
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ——————————- | ———————————————————— | ——————————————- | —— | ——- |
| data | 展示資料 | array | — | — |
| empty-text | 內容為空的時候展示的文字 | String | — | — |
| node-key | 每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的 | String | — | — |
| props | 配置選項，具體看下錶 | object | — | — |
| render-after-expand | 是否在第一次展開某個樹節點後才渲染其子節點 | boolean | — | true |
| load | 載入子樹資料的方法，僅當 lazy 屬性為true 時生效 | 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 |
| check-on-click-node | 是否在點選節點的時候選中節點，預設值為 false，即只有在點選複選框時才會選中節點。 | boolean | — | false |
| auto-expand-parent | 展開子節點的時候是否自動展開父節點 | boolean | — | true |
| default-expanded-keys | 預設展開的節點的 key 的陣列 | array | — | — |
| show-checkbox | 節點是否可被選擇 | boolean | — | false |
| check-strictly | 在顯示覆選框的情況下，是否嚴格的遵循父子不互相關聯的做法，預設為 false | boolean | — | false |
| default-checked-keys | 預設勾選的節點的 key 的陣列 | array | — | — |
| current-node-key | 當前選中的節點 | string， number | — | — |
| filter-node-method | 對樹節點進行篩選時執行的方法，返回 true 表示這個節點可以顯示，返回 false 則表示這個節點會被隱藏 | Function（value， data， node） | — | — |
| accordion | 是否每次只打開一個同級樹節點展開 | boolean | — | false |
| indent | 相鄰級節點間的水平縮排，單位為畫素 | number | — | 16 |
| icon-class | 自定義樹節點的圖示 | string | - | - |
| lazy | 是否懶載入子節點，需與 load 方法結合使用 | boolean | — | false |
| draggable | 是否開啟拖拽節點功能 | boolean | — | false |
| allow-drag | 判斷節點能否被拖拽 | Function（node） | — | — |
| allow-drop | 拖拽時判定目標節點能否被放置。`type` 引數有三種情況：‘prev’、‘inner’ 和 ‘next’，分別表示放置在目標節點前、插入至目標節點和放置在目標節點後 | Function（draggingNode， dropNode， type） | — | — |
### props
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ———— | ————————- | ———— | —— | —— |
| label | 指定節點標籤為節點物件的某個屬性值 | string， function（data， node） | — | — |
| children | 指定子樹為節點物件的某個屬性值 | string | — | — |
| disabled | 指定節點選擇框是否禁用為節點物件的某個屬性值 | boolean， function（data， node） | — | — |
| isLeaf | 指定節點是否為葉子節點，僅在指定了 lazy 屬性的情況下生效 | boolean， function（data， node） | — | — |
### 方法
`Tree` 內部使用了 Node 型別的物件來包裝使用者傳入的資料，用來儲存目前節點的狀態。
`Tree` 擁有如下方法：
| 方法名 | 說明 | 引數 |
| ————————- | ———————————————————— | ———————————————————— |
| filter | 對樹節點進行篩選操作 | 接收一個任意型別的引數，該引數會在 filter-node-method 中作為第一個引數 |
| updateKeyChildren | 透過 keys 設定節點子元素，使用此方法必須設定 node-key 屬性 | （key， data） 接收兩個引數，1。 節點 key 2。 節點資料的陣列 |
| getCheckedNodes | 若節點可被選擇（即 `show-checkbox` 為 `true`），則返回目前被選中的節點所組成的陣列 | （leafOnly， includeHalfChecked） 接收兩個 boolean 型別的引數，1。 是否只是葉子節點，預設值為 `false` 2。 是否包含半選節點，預設值為 `false` |
| setCheckedNodes | 設定目前勾選的節點，使用此方法必須設定 node-key 屬性 | （nodes） 接收勾選節點資料的陣列 |
| getCheckedKeys | 若節點可被選擇（即 `show-checkbox` 為 `true`），則返回目前被選中的節點的 key 所組成的陣列 | （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 |
| getHalfCheckedNodes | 若節點可被選擇（即 `show-checkbox` 為 `true`），則返回目前半選中的節點所組成的陣列 | - |
| getHalfCheckedKeys | 若節點可被選擇（即 `show-checkbox` 為 `true`），則返回目前半選中的節點的 key 所組成的陣列 | - |
| getCurrentKey | 獲取當前被選中節點的 key，使用此方法必須設定 node-key 屬性，若沒有節點被選中則返回 null | — |
| getCurrentNode | 獲取當前被選中節點的 data，若沒有節點被選中則返回 null | — |
| setCurrentKey | 透過 key 設定某個節點的當前選中狀態，使用此方法必須設定 node-key 屬性 | （key） 待被選節點的 key，若為 null 則取消當前高亮的節點 |
| setCurrentNode | 透過 node 設定某個節點的當前選中狀態，使用此方法必須設定 node-key 屬性 | （node） 待被選節點的 node |
| getNode | 根據 data 或者 key 拿到 Tree 元件中的 node | （data） 要獲得 node 的 key 或者 data |
| remove | 刪除 Tree 中的一個節點，使用此方法必須設定 node-key 屬性 | （data） 要刪除的節點的 data 或者 node |
| append | 為 Tree 中的一個節點追加一個子節點 | （data， parentNode） 接收兩個引數，1。 要追加的子節點的 data 2。 子節點的 parent 的 data、key 或者 node |
| insertBefore | 為 Tree 的一個節點的前面增加一個節點 | （data， refNode） 接收兩個引數，1。 要增加的節點的 data 2。 要增加的節點的後一個節點的 data、key 或者 node |
| insertAfter | 為 Tree 的一個節點的後面增加一個節點 | （data， refNode） 接收兩個引數，1。 要增加的節點的 data 2。 要增加的節點的前一個節點的 data、key 或者 node |
### Events
| 事件名稱 | 說明 | 回撥引數 |
| ———————— | ———————— | ———————————————————— |
| node-click | 節點被點選時的回撥 | 共三個引數，依次為：傳遞給 `data` 屬性的陣列中該節點所對應的物件、節點對應的 Node、節點元件本身。 |
| node-contextmenu | 當某一節點被滑鼠右鍵點選時會觸發該事件 | 共四個引數，依次為：event、傳遞給 `data` 屬性的陣列中該節點所對應的物件、節點對應的 Node、節點元件本身。 |
| check-change | 節點選中狀態發生變化時的回撥 | 共三個引數，依次為：傳遞給 `data` 屬性的陣列中該節點所對應的物件、節點本身是否被選中、節點的子樹中是否有被選中的節點 |
| check | 當複選框被點選的時候觸發 | 共兩個引數，依次為：傳遞給 `data` 屬性的陣列中該節點所對應的物件、樹目前的選中狀態物件，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個屬性 |
| current-change | 當前選中節點變化時觸發的事件 | 共兩個引數，依次為：當前節點的資料，當前節點的 Node 物件 |
| node-expand | 節點被展開時觸發的事件 | 共三個引數，依次為：傳遞給 `data` 屬性的陣列中該節點所對應的物件、節點對應的 Node、節點元件本身 |
| node-collapse | 節點被關閉時觸發的事件 | 共三個引數，依次為：傳遞給 `data` 屬性的陣列中該節點所對應的物件、節點對應的 Node、節點元件本身 |
| node-drag-start | 節點開始拖拽時觸發的事件 | 共兩個引數，依次為：被拖拽節點對應的 Node、event |
| node-drag-enter | 拖拽進入其他節點時觸發的事件 | 共三個引數，依次為：被拖拽節點對應的 Node、所進入節點對應的 Node、event |
| node-drag-leave | 拖拽離開某個節點時觸發的事件 | 共三個引數，依次為：被拖拽節點對應的 Node、所離開節點對應的 Node、event |
| node-drag-over | 在拖拽節點時觸發的事件（類似瀏覽器的 mouseover 事件） | 共三個引數，依次為：被拖拽節點對應的 Node、當前進入節點對應的 Node、event |
| node-drag-end | 拖拽結束時（可能未成功）觸發的事件 | 共四個引數，依次為：被拖拽節點對應的 Node、結束拖拽時最後進入的節點（可能為空）、被拖拽節點的放置位置（before、after、inner）、event |
| node-drop | 拖拽成功完成時觸發的事件 | 共四個引數，依次為：被拖拽節點對應的 Node、結束拖拽時最後進入的節點、被拖拽節點的放置位置（before、after、inner）、event |
### Scoped Slot
| name | 說明 |
|————|————|
| — | 自定義樹節點的內容，引數為 { node， data } |
Pagination 分頁
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————————|——————————————————————————————|——————————-|——————-|————|
| small | 是否使用小型分頁樣式 | boolean | — | false |
| background | 是否為分頁按鈕新增背景色 | boolean | — | false |
| page-size | 每頁顯示條目個數，支援 。sync 修飾符 | number | — | 10 |
| total | 總條目數 | number | — | — |
| page-count | 總頁數，total 和 page-count 設定任意一個就可以達到顯示頁碼的功能；如果要支援 page-sizes 的更改，則需要使用 total 屬性 | Number | — | — |
| pager-count | 頁碼按鈕的數量，當總頁數超過該值時會摺疊 | number | 大於等於 5 且小於等於 21 的奇數 | 7 |
| 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 | — | — |
| disabled | 是否禁用 | boolean | — | false |
| hide-on-single-page | 只有一頁時是否隱藏 | boolean | — | - |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————|————-|
| size-change | pageSize 改變時會觸發 | 每頁條數 |
| current-change | currentPage 改變時會觸發 | 當前頁 |
| prev-click | 使用者點選上一頁按鈕改變當前頁後觸發 | 當前頁 |
| next-click | 使用者點選下一頁按鈕改變當前頁後觸發 | 當前頁 |
### Slot
| name | 說明 |
|————|————|
| — | 自定義內容，需要在 `layout` 中列出 `slot` |
Badge 標記
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| value | 顯示值 | string， number | — | — |
| max | 最大值，超過最大值會顯示 ‘{max}+’，要求 value 是 Number 型別 | number | — | — |
| is-dot | 小圓點 | boolean | — | false |
| hidden | 隱藏 badge | boolean | — | false |
| type | 型別 | string | primary / success / warning / danger / info | — |
Avatar 頭像
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ————————- | ———————————————— | ————————- | ———— | ———— |
| icon | 設定頭像的圖示型別，參考 Icon 元件 | string | | |
| size | 設定頭像的大小 | number/string | number / large / medium / small | large |
| shape | 設定頭像的形狀 | string | circle / square | circle |
| src | 圖片頭像的資源地址 | string | | |
| srcSet | 以逗號分隔的一個或多個字串列表表明一系列使用者代理使用的可能的影象 | string | | |
| alt | 描述影象的替換文字 | string | | |
| fit | 當展示型別為圖片的時候，設定圖片如何適應容器框 | string | fill / contain / cover / none / scale-down | cover |
### Events
| 事件名 | 說明 | 回撥引數 |
| ———— | —————————— | ———— |
| error | 圖片類頭像載入失敗的回撥， 返回 false 會關閉元件預設的 fallback 行為 |（e： Event） |
### Slot
| 名稱 | 說明 |
| ———— | —————————— |
| default | 自定義頭像展示內容 |
四。Notice 通知
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 |
| effect | 選擇提供的主題 | string | light/dark | light |
### Slot
| Name | Description |
|————|————|
| — | 描述 |
| title | 標題的內容 |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| close | 關閉alert時觸發的事件 | — |
Loading 載入
### 服務
Loading 還可以以服務的方式呼叫。引入 Loading 服務：
```javascript
import { Loading } from ‘element-ui’；
```
在需要呼叫時：
```javascript
Loading。service（options）；
```
其中 `options` 引數為 Loading 的配置項，具體見下表。`LoadingService` 會返回一個 Loading 例項，可透過呼叫該例項的 `close` 方法來關閉它：
```javascript
let loadingInstance = Loading。service（options）；
this。$nextTick（（） => { // 以服務的方式呼叫的 Loading 需要非同步關閉
loadingInstance。close（）；
}）；
```
需要注意的是，以服務的方式呼叫的全屏 Loading 是單例的：若在前一個全屏 Loading 關閉前再次呼叫全屏 Loading，並不會建立一個新的 Loading 例項，而是返回現有全屏 Loading 的例項：
```javascript
let loadingInstance1 = Loading。service（{ fullscreen： true }）；
let loadingInstance2 = Loading。service（{ fullscreen： true }）；
console。log（loadingInstance1 === loadingInstance2）； // true
```
此時呼叫它們中任意一個的 `close` 方法都能關閉這個全屏 Loading。
如果完整引入了 Element，那麼 Vue。prototype 上會有一個全域性方法 `$loading`，它的呼叫方式為：`this。$loading（options）`，同樣會返回一個 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 | — | — |
Message 訊息提示
### 全域性方法
Element 為 Vue。prototype 添加了全域性方法 $message。因此在 vue instance 中可以採用本頁面中的方式呼叫 `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 | — | — |
| offset | Message 距離視窗頂部的偏移量 | number | — | 20 |
### 方法
呼叫 `Message` 或 `this。$message` 會返回當前 Message 的例項。如果需要手動關閉例項，可以呼叫它的 `close` 方法。
| 方法名 | 說明 |
| —— | —— |
| close | 關閉當前的 Message |
MessageBox 彈框
### 全域性方法
如果你完整引入了 Element，它會為 Vue。prototype 新增如下全域性方法：$msgbox， $alert， $confirm 和 $prompt。因此在 Vue instance 中可以採用本頁面中的方式呼叫 `MessageBox`。呼叫引數為：
- `$msgbox（options）`
- `$alert（message， title， options）` 或 `$alert（message， options）`
- `$confirm（message， title， options）` 或 `$confirm（message， options）`
- `$prompt（message， title， options）` 或 `$prompt（message， options）`
### 單獨引用
如果單獨引入 `MessageBox`：
```javascript
import { MessageBox } from ‘element-ui’；
```
那麼對應於上述四個全域性方法的呼叫方法依次為：MessageBox， MessageBox。alert， MessageBox。confirm 和 MessageBox。prompt，呼叫引數與全域性方法相同。
### Options
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| title | MessageBox 標題 | string | — | — |
| message | MessageBox 訊息正文內容 | string / VNode | — | — |
| dangerouslyUseHTMLString | 是否將 message 屬性作為 HTML 片段處理 | boolean | — | false |
| type | 訊息型別，用於顯示圖示 | string | success / info / warning / error | — |
| iconClass | 自定義圖示的類名，會覆蓋 `type` | string | — | — |
| customClass | MessageBox 的自定義類名 | string | — | — |
| callback | 若不使用 Promise，可以使用此引數指定 MessageBox 關閉後的回撥 | function（action， instance），action 的值為‘confirm’， ‘cancel’或‘close’， instance 為 MessageBox 例項，可以透過它訪問例項上的屬性和方法 | — | — |
| showClose | MessageBox 是否顯示右上角關閉按鈕 | boolean | — | true |
| beforeClose | MessageBox 關閉前的回撥，會暫停例項的關閉 | function（action， instance， done），action 的值為‘confirm’， ‘cancel’或‘close’；instance 為 MessageBox 例項，可以透過它訪問例項上的屬性和方法；done 用於關閉 MessageBox 例項 | — | — |
| distinguishCancelAndClose | 是否將取消（點選取消按鈕）與關閉（點選關閉按鈕或遮罩層、按下 ESC 鍵）進行區分 | boolean | — | false |
| 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 |
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 |
五。Navigation導航
NavMenu 導航選單
### Menu Attribute
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| mode | 模式 | string | horizontal / vertical | vertical |
| collapse | 是否水平摺疊收起選單（僅在 mode 為 vertical 時可用）| boolean | — | false |
| background-color | 選單的背景色（僅支援 hex 格式） | string | — | #ffffff |
| text-color | 選單的文字顏色（僅支援 hex 格式） | string | — | #303133 |
| active-text-color | 當前啟用選單的文字顏色（僅支援 hex 格式） | string | — | #409EFF |
| default-active | 當前啟用選單的 index | string | — | — |
| default-openeds | 當前開啟的 sub-menu 的 index 的陣列 | Array | — | — |
| unique-opened | 是否只保持一個子選單的展開 | boolean | — | false |
| menu-trigger | 子選單開啟的觸發方式（只在 mode 為 horizontal 時有效） | string | hover / click | hover |
| router | 是否使用 vue-router 的模式，啟用該模式會在啟用導航時以 index 作為 path 進行路由跳轉 | boolean | — | false |
| collapse-transition | 是否開啟摺疊動畫 | boolean | — | true |
### Menu Methods
| 方法名稱 | 說明 | 引數 |
|—————— |———— |—————— |
| open | 展開指定的 sub-menu | index： 需要開啟的 sub-menu 的 index |
| close | 收起指定的 sub-menu | index： 需要收起的 sub-menu 的 index |
### Menu Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| select | 選單啟用回撥 | index： 選中選單項的 index， indexPath： 選中選單項的 index path |
| open | sub-menu 展開的回撥 | index： 開啟的 sub-menu 的 index， indexPath： 開啟的 sub-menu 的 index path |
| close | sub-menu 收起的回撥 | index： 收起的 sub-menu 的 index， indexPath： 收起的 sub-menu 的 index path |
### SubMenu Attribute
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| index | 唯一標誌 | string/null | — | null |
| popper-class | 彈出選單的自定義類名 | string | — | — |
| show-timeout | 展開 sub-menu 的延時 | number | — | 300 |
| hide-timeout | 收起 sub-menu 的延時 | number | — | 300 |
| disabled | 是否禁用 | boolean | — | false |
| popper-append-to-body | 是否將彈出選單插入至 body 元素。在選單的定位出現問題時，可嘗試修改該屬性 | boolean | — | 一級子選單：true / 非一級子選單：false |
### Menu-Item Attribute
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| index | 唯一標誌 | string | — | — |
| route | Vue Router 路徑物件 | Object | — | — |
| disabled | 是否禁用 | boolean | — | false |
### Menu-Group Attribute
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| title | 分組標題 | string | — | — |
Tabs 標籤頁
### Tabs Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| value / v-model | 繫結值，選中選項卡的 name | string | — | 第一個選項卡的 name |
| type | 風格型別 | string | card/border-card | — |
| closable | 標籤是否可關閉 | boolean | — | false |
| addable | 標籤是否可增加 | boolean | — | false |
| editable | 標籤是否同時可增加和關閉 | boolean | — | false |
| tab-position | 選項卡所在位置 | string | top/right/bottom/left | top |
| stretch | 標籤的寬度是否自撐開 | boolean | - | false |
| before-leave | 切換標籤之前的鉤子，若返回 false 或者返回 Promise 且被 reject，則阻止切換。 | Function（activeName， oldActiveName） | — | — |
### Tabs Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| tab-click | tab 被選中時觸發 | 被選中的標籤 tab 例項 |
| tab-remove | 點選 tab 移除按鈕後觸發 | 被刪除的標籤的 name |
| tab-add | 點選 tabs 的新增按鈕後觸發 | — |
| edit | 點選 tabs 的新增按鈕或 tab 被關閉後觸發 | （targetName， action） |
### Tab-pane Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| label | 選項卡標題 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 與選項卡繫結值 value 對應的識別符號，表示選項卡別名 | string | — | 該選項卡在選項卡列表中的順序值，如第一個選項卡則為‘1’ |
| closable | 標籤是否可關閉 | boolean | — | false |
| lazy | 標籤是否延遲渲染 | boolean | — | false |
Breadcrumb 麵包屑
### Breadcrumb Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| separator | 分隔符 | string | — | 斜槓‘/’ |
| separator-class | 圖示分隔符 class | string | — | - |
### Breadcrumb Item Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| to | 路由跳轉物件，同 `vue-router` 的 `to` | string/object | — | — |
| replace | 在使用 to 進行路由跳轉時，啟用 replace 將不會向 history 新增新記錄 | boolean | — | false |
PageHeader 頁頭
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— | ———— |
| title | 標題 | string | — | 返回 |
| content | 內容 | string | — | — |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———————— |—————— |
| back | 點選左側區域觸發 | — |
### Slots
| 事件名稱 | 說明 |
|—————— |——————- |
| title | 標題內容 |
| content | 內容 |
Dropdown 下拉選單
### Dropdown Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| type | 選單按鈕型別，同 Button 元件（只在`split-button`為 true 的情況下有效） | string | — | — |
| size | 選單尺寸，在`split-button`為 true 的情況下也對觸發按鈕生效 | string | medium / small / mini | — |
| split-button | 下拉觸發元素呈現為按鈕組 | boolean | — | false |
| placement | 選單彈出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | 觸發下拉的行為 | string | hover， click | hover |
| hide-on-click | 是否在點選選單項後隱藏選單 | boolean | — | true |
| show-timeout | 展開下拉選單的延時（僅在 trigger 為 hover 時有效）| number | — | 250 |
| hide-timeout | 收起下拉選單的延時（僅在 trigger 為 hover 時有效）| number | — | 150 |
| tabindex | Dropdown 元件的 ［tabindex］（https：//developer。mozilla。org/en-US/docs/Web/HTML/Global_attributes/tabindex） | number | — | 0 |
### Dropdown Slots
| Name | 說明 |
|————|————|
| — | 觸發下拉列表顯示的元素。 注意： 必須是一個元素或者或者元件 |
| dropdown | 下拉列表，通常是 `
### Dropdown Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| click | `split-button` 為 true 時，點選左側按鈕的回撥 | — |
| command | 點選選單項觸發的事件回撥 | dropdown-item 的指令 |
| visible-change | 下拉框出現/隱藏時觸發 | 出現則為 true，隱藏則為 false |
### Dropdown Menu Item Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| command | 指令 | string/number/object | — | — |
| disabled | 禁用 | boolean | — | false |
| divided | 顯示分割線 | boolean | — | false |
| icon | 圖示類名 | string | — | — |
Steps 步驟條
### Steps Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| space | 每個 step 的間距，不填寫將自適應間距。支援百分比。 | number / string | — | — |
| direction | 顯示方向 | string | vertical/horizontal | horizontal |
| active | 設定當前啟用步驟 | number | — | 0 |
| process-status | 設定當前步驟的狀態 | string | wait / process / finish / error / success | process |
| finish-status | 設定結束步驟的狀態 | string | wait / process / finish / error / success | finish |
| align-center | 進行居中對齊 | boolean | - | false |
| simple | 是否應用簡潔風格 | boolean | - | false |
### Step Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| title | 標題 | string | — | — |
| description | 描述性文字 | string | — | — |
| icon | 圖示 | 傳入 icon 的 class 全名來自定義 icon，也支援 slot 方式寫入 | string | — |
| status | 設定當前步驟的狀態，不設定則根據 steps 確定狀態 | wait / process / finish / error / success | - |
### Step Slot
| name | 說明 |
|——|——|
| icon | 自定義圖示 |
| title | 自定義標題 |
| description | 自定義描述性文字 |
六。other其他元件
Dialog 對話方塊
：：：tip
Dialog 的內容是懶渲染的，即在第一次被開啟之前，傳入的預設 slot 不會被渲染到 DOM 上。因此，如果需要執行 DOM 操作，或透過 `ref` 獲取相應元件，請在 `open` 事件回撥中進行。
：：：
：：：tip
如果 `visible` 屬性繫結的變數位於 Vuex 的 store 內，那麼 `。sync` 不會正常工作。此時需要去除 `。sync` 修飾符，同時監聽 Dialog 的 `open` 和 `close` 事件，在事件回撥中執行 Vuex 中對應的 mutation 更新 `visible` 屬性繫結的變數的值。
：：：
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| visible | 是否顯示 Dialog，支援 。sync 修飾符 | boolean | — | false |
| title | Dialog 的標題，也可透過具名 slot （見下表）傳入 | string | — | — |
| width | Dialog 的寬度 | string | — | 50% |
| fullscreen | 是否為全屏 Dialog | boolean | — | false |
| top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
| modal | 是否需要遮罩層 | boolean | — | true |
| modal-append-to-body | 遮罩層是否插入至 body 元素上，若為 false，則遮罩層會插入至 Dialog 的父元素上 | boolean | — | true |
| append-to-body | Dialog 自身是否插入至 body 元素上。巢狀的 Dialog 必須指定該屬性並賦值為 true | boolean | — | false |
| lock-scroll | 是否在 Dialog 出現時將 body 滾動鎖定 | boolean | — | true |
| custom-class | Dialog 的自定義類名 | string | — | — |
| close-on-click-modal | 是否可以透過點選 modal 關閉 Dialog | boolean | — | true |
| close-on-press-escape | 是否可以透過按下 ESC 關閉 Dialog | boolean | — | true |
| show-close | 是否顯示關閉按鈕 | boolean | — | true |
| before-close | 關閉前的回撥，會暫停 Dialog 的關閉 | function（done），done 用於關閉 Dialog | — | — |
| center | 是否對頭部和底部採用居中佈局 | boolean | — | false |
| destroy-on-close | 關閉時銷燬 Dialog 中的元素 | boolean | — | false |
### Slot
| name | 說明 |
|————|————|
| — | Dialog 的內容 |
| title | Dialog 標題區的內容 |
| footer | Dialog 按鈕操作區的內容 |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| open | Dialog 開啟的回撥 | — |
| opened | Dialog 開啟動畫結束時的回撥 | — |
| close | Dialog 關閉的回撥 | — |
| closed | Dialog 關閉動畫結束時的回撥 | — |
Tooltip 文字提示
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————————|——————————————————————————————|——————————-|——————-|————|
| effect | 預設提供的主題 | String | dark/light | dark |
| content | 顯示的內容，也可以透過 `slot#content` 傳入 DOM | String | — | — |
| placement | Tooltip 的出現位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value / v-model | 狀態是否可見 | Boolean | — | false |
| disabled | Tooltip 是否可用 | Boolean | — | false |
| offset | 出現位置的偏移量 | Number | — | 0 |
| transition | 定義漸變動畫 | String | — | el-fade-in-linear |
| visible-arrow | 是否顯示 Tooltip 箭頭，更多引數可見［Vue-popper］（https：//github。com/element-component/vue-popper） | Boolean | — | true |
| popper-options | ［popper。js］（https：//popper。js。org/documentation。html） 的引數 | Object | 參考 ［popper。js］（https：//popper。js。org/documentation。html） 文件 | { boundariesElement： ‘body’， gpuAcceleration： false } |
| open-delay | 延遲出現，單位毫秒 | Number | — | 0 |
| manual | 手動控制模式，設定為 true 後，mouseenter 和 mouseleave 事件將不會生效 | Boolean | — | false |
| popper-class | 為 Tooltip 的 popper 新增類名 | String | — | — |
| enterable | 滑鼠是否可進入到 tooltip 中 | Boolean | — | true |
| hide-after | Tooltip 出現後自動隱藏延時，單位毫秒，為 0 則不會自動隱藏 | number | — | 0 |
| tabindex | Tooltip 元件的 ［tabindex］（https：//developer。mozilla。org/en-US/docs/Web/HTML/Global_attributes/tabindex） | number | — | 0 |
Popover 彈出框
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————————|——————————————————————————————|——————————-|——————-|————|
| trigger | 觸發方式 | String | click/focus/hover/manual | click |
| title | 標題 | String | — | — |
| content | 顯示的內容，也可以透過 `slot` 傳入 DOM | String | — | — |
| width | 寬度 | String， Number | — | 最小寬度 150px |
| placement | 出現位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | Popover 是否可用 | Boolean | — | false |
| value / v-model | 狀態是否可見 | Boolean | — | false |
| offset | 出現位置的偏移量 | Number | — | 0 |
| transition | 定義漸變動畫 | String | — | fade-in-linear |
| visible-arrow | 是否顯示 Tooltip 箭頭，更多引數可見［Vue-popper］（https：//github。com/element-component/vue-popper） | Boolean | — | true |
| popper-options | ［popper。js］（https：//popper。js。org/documentation。html） 的引數 | Object | 參考 ［popper。js］（https：//popper。js。org/documentation。html） 文件 | `{ boundariesElement： ‘body’， gpuAcceleration： false }` |
| popper-class | 為 popper 新增類名 | String | — | — |
| open-delay | 觸發方式為 hover 時的顯示延遲，單位為毫秒 | Number | — | — |
| close-delay | 觸發方式為 hover 時的隱藏延遲，單位為毫秒 | number | — | 200 |
| tabindex | Popover 元件的 ［tabindex］（https：//developer。mozilla。org/en-US/docs/Web/HTML/Global_attributes/tabindex） | number | — | 0 |
### Slot
| 引數 | 說明 |
|——- | ——-|
| — | Popover 內嵌 HTML 文字 |
| reference | 觸發 Popover 顯示的 HTML 元素 |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————|————-|
| show | 顯示時觸發 | — |
| after-enter | 顯示動畫播放完畢後觸發 | — |
| hide | 隱藏時觸發 | — |
| after-leave | 隱藏動畫播放完畢後觸發 | — |
Popconfirm 氣泡確認框
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————————|——————————————————————————————|——————————-|——————-|————|
| title | 標題 | String | — | — |
| confirm-button-text | 確認按鈕文字 | String | — | — |
| cancel-button-text | 取消按鈕文字 | String | — | — |
| confirm-button-type | 確認按鈕型別 | String | — | Primary |
| cancel-button-type | 取消按鈕型別 | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| icon-color | Icon 顏色 | String | — | #f90 |
| hide-icon | 是否隱藏 Icon | Boolean | — | false |
### Slot
| 引數 | 說明 |
|——- | ——-|
| reference | 觸發 Popconfirm 顯示的 HTML 元素 |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————|————-|
| confirm | 點選確認按鈕時觸發 | — |
| cancel | 點選取消按鈕時觸發 | — |
Card 卡片
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| header | 設定 header，也可以透過 `slot#header` 傳入 DOM | string| — | — |
| body-style | 設定 body 的樣式| object| — | { padding： ‘20px’ } |
| shadow | 設定陰影顯示時機 | string | always / hover / never | always |
Carousel 走馬燈
### Carousel Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| height | 走馬燈的高度 | string | — | — |
| initial-index | 初始狀態啟用的幻燈片的索引，從 0 開始 | number | — | 0 |
| trigger | 指示器的觸發方式 | string | click | — |
| autoplay | 是否自動切換 | boolean | — | true |
| interval | 自動切換的時間間隔，單位為毫秒 | number | — | 3000 |
| indicator-position | 指示器的位置 | string | outside/none | — |
| arrow | 切換箭頭的顯示時機 | string | always/hover/never | hover |
| type | 走馬燈的型別 | string | card | — |
| loop | 是否迴圈顯示 | boolean | - | true |
| direction | 走馬燈展示的方向 | string | horizontal/vertical | horizontal |
### Carousel Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————-|————-|
| change | 幻燈片切換時觸發 | 目前啟用的幻燈片的索引，原幻燈片的索引 |
### Carousel Methods
| 方法名 | 說明 | 引數 |
|—————— |———————— | —— |
| setActiveItem | 手動切換幻燈片 | 需要切換的幻燈片的索引，從 0 開始；或相應 `el-carousel-item` 的 `name` 屬性值 |
| prev | 切換至上一張幻燈片 | — |
| next | 切換至下一張幻燈片 | — |
### Carousel-Item Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| name | 幻燈片的名字，可用作 `setActiveItem` 的引數 | string | — | — |
| label | 該幻燈片所對應指示器的文字 | string | — | — |
Collapse 摺疊面板
### Collapse Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| value / v-model | 當前啟用的面板（如果是手風琴模式，繫結值型別需要為`string`，否則為`array`） | string / array | — | — |
| accordion | 是否手風琴模式 | boolean | — | false |
### Collapse Events
| 事件名稱 | 說明 | 回撥引數 |
|————-|————-|————-|
| change | 當前啟用面板改變時觸發（如果是手風琴模式，引數 `activeNames` 型別為`string`，否則為`array`） | （activeNames： array / string） |
### Collapse Item Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| name | 唯一標誌符 | string/number | — | — |
| title | 面板標題 | string | — | — |
| disabled | 是否禁用 | boolean | — | — |
Timeline 時間線
### Timeline Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| reverse | 指定節點排序方向，預設為正序 | boolean | — | false |
### Timeline-item Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| timestamp | 時間戳 | string | - | — |
| hide-timestamp | 是否隱藏時間戳 | boolean | — | false |
| placement | 時間戳位置 | string | top / bottom | bottom |
| type | 節點型別 | string | primary / success / warning / danger / info | - |
| color | 節點顏色 | string | hsl / hsv / hex / rgb | - |
| size | 節點尺寸 | string | normal / large | normal |
| icon | 節點圖示 | string | — | - |
### Timeline-Item Slot
| name | 說明 |
|————|————|
| — | Timeline-Item 的內容 |
| dot | 自定義節點 |
Divider 分割線
### Divider Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|——————- |———————— |———————— |———————————— |———— |
| direction | 設定分割線方向 | string | horizontal / vertical | horizontal |
| content-position | 設定分割線文案的位置 | string | left / right / center | center |
Calendar 日曆
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|————————-|———————— |—————— |—————— |———— |
| value / v-model | 繫結值 | Date/string/number | — | — |
| range | 時間範圍，包括開始時間與結束時間。開始時間必須是週一，結束時間必須是週日，且時間跨度不能超過兩個月。 | Array | — | — |
| first-day-of-week | 周起始日 | Number | 1 到 7 | 1 |
### dateCell scoped slot 引數
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|————————-|———————— |—————— |—————— |———— |
| date | 單元格代表的日期 | Date | — | — |
| data | { type， isSelected， day}，`type` 表示該日期的所屬月份，可選值有 prev-month，current-month，next-month；`isSelected` 標明該日期是否被選中；`day` 是格式化的日期，格式為 yyyy-MM-dd | Object | — | — |
Image 圖片
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———— |—————— |——————- |———— |
| src | 圖片源，同原生 | string | — | - |
| fit | 確定圖片如何適應容器框，同原生 ［object-fit］（https：//developer。mozilla。org/en-US/docs/Web/CSS/object-fit） | string | fill / contain / cover / none / scale-down | - |
| alt | 原生 alt | string | - | - |
| referrer-policy | 原生 referrerPolicy | string | - | - |
| lazy | 是否開啟懶載入 | boolean | — | false |
| scroll-container | 開啟懶載入後，監聽 scroll 事件的容器 | string / HTMLElement | — | 最近一個 overflow 值為 auto 或 scroll 的父元素 |
| preview-src-list | 開啟圖片預覽功能 | Array | — | - |
| z-index | 設定圖片預覽的 z-index | Number | — | 2000 |
### Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| load | 圖片載入成功觸發 | （e： Event） |
| error | 圖片載入失敗觸發 | （e： Error） |
### Slots
| 名稱 | 說明 |
|————-|——————-|
| placeholder | 圖片未載入的佔位內容 |
| error | 載入失敗的內容 |
Backtop 回到頂部
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ————————- | ———————————————— | ————————- | ———— | ———— |
| target | 觸發滾動的物件 | string | | |
| visibility-height | 滾動高度達到此引數值才出現 | number | | 200 |
| right | 控制其顯示位置， 距離頁面右邊距 | number | | 40 |
| bottom | 控制其顯示位置， 距離頁面底部距離 | number | | 40 |
### Events
| 事件名 | 說明 | 回撥引數 |
| ———— | —————————— | ———— |
| click | 點選按鈕觸發的事件 | 點選事件 |
InfiniteScroll 無限滾動
### Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
| ———————— | ———————————————— | ————- | —————————————————— | ————- |
| infinite-scroll-disabled | 是否禁用 | boolean | - |false |
| infinite-scroll-delay | 節流時延，單位為ms | number | - |200 |
| infinite-scroll-distance| 觸發載入的距離閾值，單位為px | number |- |0 |
| infinite-scroll-immediate | 是否立即執行載入方法，以防初始狀態下內容無法撐滿容器。| boolean | - |true |
Drawer 抽屜
### Drawer Attributes
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|—————— |———————— |—————— |———————————————— |———— |
| append-to-body | Drawer 自身是否插入至 body 元素上。巢狀的 Drawer 必須指定該屬性並賦值為 true | boolean | — | false |
| before-close | 關閉前的回撥，會暫停 Drawer 的關閉 | function（done），done 用於關閉 Drawer | — | — |
| close-on-press-escape | 是否可以透過按下 ESC 關閉 Drawer | boolean | — | true |
| custom-class | Drawer 的自定義類名 | string | — | — |
| destroy-on-close | 控制是否在關閉 Drawer 之後將子元素全部銷燬 | boolean | - | false |
| modal | 是否需要遮罩層 | boolean | — | true |
| modal-append-to-body | 遮罩層是否插入至 body 元素上，若為 false，則遮罩層會插入至 Drawer 的父元素上 | boolean | — | true |
| direction | Drawer 開啟的方向 | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | 是否顯示關閉按鈕 | boolean | — | true |
| size | Drawer 窗體的大小， 當使用 `number` 型別時， 以畫素為單位， 當使用 `string` 型別時， 請傳入 ‘x%’， 否則便會以 `number` 型別解釋 | number / string | - | ‘30%’ |
| title | Drawer 的標題，也可透過具名 slot （見下表）傳入 | string | — | — |
| visible | 是否顯示 Drawer，支援 。sync 修飾符 | boolean | — | false |
| wrapperClosable | 點選遮罩層是否可以關閉 Drawer | boolean | - | true |
| withHeader | 控制是否顯示 header 欄， 預設為 true， 當此項為 false 時， title attribute 和 title slot 均不生效 | boolean | - | true |
### Drawer Slot
| name | 說明 |
|————|————|
| — | Drawer 的內容 |
| title | Drawer 標題區的內容 |
### Drawer Methods
| name | 說明 |
| —— | ——- |
| closeDrawer | 用於關閉 Drawer， 該方法會呼叫傳入的 `before-close` 方法 |
### Drawer Events
| 事件名稱 | 說明 | 回撥引數 |
|—————— |———— |—————— |
| open | Drawer 開啟的回撥 | — |
| opened | Drawer 開啟動畫結束時的回撥 | — |
| close | Drawer 關閉的回撥 | — |
| closed | Drawer 關閉動畫結束時的回撥 | — |
