8000字 - 詳解 Tkinter 的 GUI 界

8000字 - 詳解 Tkinter 的 GUI 界面制作

效果展示

本文為大家講述了如何使用Tkinter制作一個簡單的可視化界面工具。有時候，我們用代碼實現了某些功能，如果可以為這個功能添加一個界面，是否會感覺倍兒爽？

在正式講述文章之前，先來看看使用Tkinter做出來的最終效果吧！

Tkinter簡介

Tkinter(也叫 Tk 接口)是 Tk 圖形用戶界面工具包標準的 Python 接口。

Tk 是一個輕量級的跨平臺圖形用戶界面 (GUI)開發工具。Tk 和 Tkinter 可以運行在大多數的 Unix 平臺、Windows、和 Macintosh 系統。

由于Tkinter是Python自帶的標準庫，我們想要使用它的時候，只需直接導入即可。

from tkinter import *

Tkinter支持的組件有：

Tkinter常用組件使用介紹

上述為大家列出了Tkinter中的常用組件。各個組件有其相對應的功能和用法，而我們可以根據我這些控件自由組合來展現出我們想要的效果。

這里先給大家簡單介紹一下常用的，也是本文小工具里會用到的一些組件。

1. Button（按鈕控件）

Button組件是用來觸發事件的，它會在窗口上以按鈕的方式顯示，在你單擊它的時候就會運行與Button綁定的函數。

from tkinter import *

def b1():
 root['bg']="blue"

root=Tk()
str1="Hello World"
Button(root,text=str1,command=b1).place(x=0,y=0)
root.mainloop()

效果如下：

2. Label（標簽控件）

Label是標簽控件，能在指定的窗口中顯示的文本和圖像。

from tkinter import *

root=Tk()
str1="Hello World"
Label(root,text=str1).place(x=0,y=0)
root.mainloop()

效果如下：

3. Entry（文本框）

Entry是文本框，用來讓用戶輸入一行文本字符串，也可以用來顯示文本字符串。在使用Entry的時候，我們需要用到一個函數stringVar()，這個函數定義的變量會被一直追蹤，當你想要獲得該變量當時的值，只需要用該變量的get函數。

from tkinter import *

def b1():
 print(str1.get())

root=Tk()
str1=StringVar()
str1.set("Hello world")
Entry(root,textvariable=str1).place(x=0,y=5)
Button(root,text="輸出",command=b1).place(x=150,y=0)
root.mainloop()

效果如下：

Tkinter常用幾何管理方法使用介紹

上面介紹了一些組件，下面再為大家介紹一下Tkinter的一些幾何管理方法。所謂的幾何管理方法就是用來組織和管理整個父配件區中子配件的布局的。

正是有這些幾何方法的存在，我們才可以隨心所欲的，將組件安排在我們想讓它出現的地方，所有的Tkinter組件都包含專用的幾何管理方法。

1. pack()

pack幾何管理，采用塊的方式組織配件，常用在開發簡單的界面。pack幾何管理程序根據組件創建生成的順序，將組件添加到父組件中去。如果不指定任何選項，默認在父窗體中自頂向下添加組件。

from tkinter import *

root=Tk()
Button(root,text='1',width=5).pack()
Button(root,text='2',width=5).pack()
Button(root,text='3',width=5).pack(side="left")
Button(root,text='4',width=5).pack(side="right")
Button(root,text='5',width=5).pack(side="bottom")
Button(root,text='6',width=5).pack()
root.mainloop()

效果如下：

2. grid()

grid幾何管理，采用表格結構組織配件，通過行(row)列(column)來確定組件擺放的位置，這也是它的兩個重要的參數。

from tkinter import *

root=Tk()
Button(root,text='1',width=5).grid(row=0,column=0)
Button(root,text='2',width=5).grid(row=0,column=1)
Button(root,text='3',width=5).grid(row=0,column=2)
Button(root,text='4',width=5).grid(row=1,column=0)
Button(root,text='5',width=5).grid(row=1,column=1)
Button(root,text='6',width=5).grid(row=2,column=0)
root.mainloop()

效果如下:

3. place()

place幾何管理，允許指定組件的大小以及位置，通過x和y的數值來確定組件的位置，通過width和height來確定組件的大小。

from tkinter import *

root=Tk()
Button(root,text='1',width=5).place(x=80,y=0)
Button(root,text='2',width=5).place(x=80,y=170)
Button(root,text='3',width=5).place(x=0,y=85)
Button(root,text='4',width=5).place(x=155,y=85)
Button(root,text='5',width=5).place(x=70,y=70,width=60,height=60)
root.mainloop()

效果如下：

Tkinter實現彈窗提示

有時候，我們想要實現一個彈窗提示功能。此時，可以使用tkinter.messagebox，這個也是Python自帶的。在我們需要實現彈窗功能的時候，只需要將其導入，使用對應的函數，再輸入對應的參數，一個小彈窗就做好了。

from tkinter import *
import tkinter.messagebox

def b1():
 tkinter.messagebox.showinfo(title="危險", message="出錯了")

root=Tk()
Button(root,text='1',command=b1 ).pack()
root.mainloop()

效果如下：

Tkinter案例講解

通過上述對Tkinter的講解，我們基本可以上手制作一個屬于自己的界面窗口了。最后，還是通過一個案例講解，為大家講述它的使用。

需求： 我寫了一段自動化整理文件夾的窗口，但是想要制作一個界面，能夠隨意選擇路徑，當我點擊桌面一鍵整理后，就可以完成文件夾的自動整理。

下面是最后制作的界面效果，基本功能都實現了，同時還多出了兩個功能，復制所有文件名和時間提示，是不是很棒？

關于自動化整理文件夾的程序，黃同學已經給出了。我在他的基礎上，結合Tkinter，最終制作出了這個界面。完整代碼如下：

from tkinter.filedialog import askdirectory
from tkinter import *
import time
import datetime
import os
import shutil
import pyperclip
import tkinter.messagebox

class MY_GUI():
def __init__(self,init_window_name):
 self.init_window_name=init_window_name
 self.path=StringVar()

def selectPath(self): #選擇路徑
 path_=askdirectory()
 self.path.set(path_)

def error(self): #錯誤彈窗
 tkinter.messagebox.showinfo(title="提示", message="未選擇路徑")

def uptime(self): #更新時間
 TimeLabel["text"]=datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S:') + "%d" % (datetime.datetime.now().microsecond // 100000)
 self.init_window_name.after(100, self.uptime)

#設置窗口
def set_init_window(self):
 self.init_window_name.title("數據分析與統計學之美") #窗口標題欄
 self.init_window_name.geometry('300x300+600+300') #窗口大小，300x300是窗口的大小，+600是距離左邊距的距離，+300是距離上邊距的距離
 self.init_window_name.resizable(width=FALSE, height=FALSE) #限制窗口大小，拒絕用戶調整邊框大小
 Label(self.init_window_name, text="歡迎使用一鍵整理小工具",bg="SkyBlue",fg="Gray").place(x=80,y=10) #標簽組件，用來顯示內容，place里的x、y是標簽組件放置的位置
 Label(self.init_window_name, text="當前路徑:",bg="SkyBlue").place(x=15,y=50) #標簽組件，用來顯示內容，place里的x、y是標簽組件放置的位置
 Entry(self.init_window_name, textvariable=self.path).place(x=75,y=50) #輸入控件，用于顯示簡單的文本內容
 Button(self.init_window_name, text="路徑選擇", command=self.selectPath,bg="SkyBlue").place(x=225,y=45) #按鈕組件，用來觸發某個功能或函數
 Button(self.init_window_name, text="桌面一鍵整理",bg="SkyBlue",command=self.option).place(width=200,height=50,x=50,y=100) #按鈕組件，用來觸發某個功能或函數
 Button(self.init_window_name, text="復制所有文件名",bg="SkyBlue", command=self.option1).place(width=200, height=50, x=50, y=180) #按鈕組件，用來觸發某個功能或函數
 self.init_window_name["bg"]="SkyBlue" #窗口背景色
 self.init_window_name.attributes("-alpha",0.8) #虛化，值越小虛化程度越高
global TimeLabel #全局變量
 TimeLabel=Label(text="%s%d" % (datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S:'), datetime.datetime.now().microsecond // 100000),bg="SkyBlue") #標簽組件，顯示時間
 TimeLabel.place(x=80, y=260)
 self.init_window_name.after(100,self.uptime)

def arrangement(self,str1): #整理文件
 file_dict={
'圖片': ['jpg', 'png', 'gif', 'webp'],
'視頻': ['rmvb', 'mp4', 'avi', 'mkv', 'flv'],
"音頻": ['cd', 'wave', 'aiff', 'mpeg', 'mp3', 'mpeg-4'],
'文檔': ['xls', 'xlsx', 'csv', 'doc', 'docx', 'ppt', 'pptx', 'pdf', 'txt'],
'壓縮文件': ['7z', 'ace', 'bz', 'jar', 'rar', 'tar', 'zip', 'gz'],
'常用格式': ['json', 'xml', 'md', 'ximd'],
'程序腳本': ['py', 'java', 'html', 'sql', 'r', 'css', 'cpp', 'c', 'sas', 'js', 'go'],
'可執行程序': ['exe', 'bat', 'lnk', 'sys', 'com'],
'字體文件': ['eot', 'otf', 'fon', 'font', 'ttf', 'ttc', 'woff', 'woff2']
 }
 os.chdir(str1)
 folder=os.listdir('.')
for each in folder:
#print(each.split('.')[-1])
for name,type in file_dict.items():
if each.split('.')[-1] in type:
if not os.path.exists(name):
 os.mkdir(name)
 shutil.move(each,name)
 tkinter.messagebox.showinfo(title="提示", message="整理完成")

def copy(self,str1):
 os.chdir(str1)
 folder=os.listdir('.')
 str1=''
for each in folder:
 type='.' + each.split('.')[-1]
 str1=str1 + each.replace(type,'') + '\n'
 pyperclip.copy(str1)
#獲取當前時間
def get_current_time(self):
 current_time=time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time()))
return current_time

def option(self):
if self.path.get()=="":
 self.error()
else:
 self.arrangement(self.path.get())

def option1(self):
if self.path.get()=="":
 self.error()
else:
 self.copy(self.path.get())


if __name__=='__main__':
 init_window=Tk() # 實例化出一個父窗口
 ZMJ_PORTAL=MY_GUI(init_window)
 ZMJ_PORTAL.set_init_window()
 init_window.mainloop()

從代碼里可以看到，為了窗口的整體美觀，我們規定了窗口的大小。

#窗口大小，300x300是窗口的大小，+600是距離左邊距的距離，+300是距離上邊距的距離
self.init_window_name.geometry('300x300+600+300')

還設置了窗口的基本屬性。

#窗口標題欄
self.init_window_name.title("數據分析與統計學之美") 

#限制窗口大小，拒絕用戶調整邊框大小 
self.init_window_name.resizable(width=FALSE, height=FALSE) 

#虛化，值越小虛化程度越高 
self.init_window_name.attributes("-alpha",0.8) 

#窗口背景色 
self.init_window_name["bg"]="SkyBlue"

所有組件都用了place幾何方法，將組件的大小及布局，進行了良好的規劃。同時，Button組件也都與其對應的功能函數，進行了鏈接。

#標簽組件，用來顯示內容，place里的x、y是標簽組件放置的位置
Label(self.init_window_name, text="歡迎使用一鍵整理小工具",bg="SkyBlue",fg="Gray").place(x=80,y=10) 

#標簽組件，用來顯示內容，place里的x、y是標簽組件放置的位置
Label(self.init_window_name, text="當前路徑:",bg="SkyBlue").place(x=15,y=50) 

#輸入控件，用于顯示簡單的文本內容
Entry(self.init_window_name, textvariable=self.path).place(x=75,y=50) 

#按鈕組件，用來觸發某個功能或函數 
Button(self.init_window_name, text="路徑選擇",command=self.selectPath,bg="SkyBlue").place(x=225,y=45) 

#按鈕組件，用來觸發某個功能或函數
Button(self.init_window_name, text="桌面一鍵整理",bg="SkyBlue",command=self.option).place(width=200,height=50,x=50,y=100) 

#按鈕組件，用來觸發某個功能或函數
Button(self.init_window_name, text="復制所有文件名",bg="SkyBlue", command=self.option1).place(width=200, height=50, x=50, y=180)

如果路徑為空的時候，需要制作一個彈窗提示：未選擇路徑。

def option(self):
if self.path.get()=="":
 self.error()
else:
 self.arrangement(self.path.get())


def error(self): #錯誤彈窗
 tkinter.messagebox.showinfo(title="提示", message="未選擇路徑")

程序打包與代碼獲取

程序打包我采用的是pyinstaller命令，在使用該命令前，最重要的當然就是安裝啦！

#安裝
pip install pyinstaller

#打包指令
pyinstaller -F 數據分析與統計學之美.py

在命令終端輸入安裝命令，下載安裝pyinstaller。下載完成后再切換到存放.py文件的目錄里，運行打包指令，待運行結束，我們可以看到目錄里多出了一些文件夾和文件。

ue的消息提示框插件

在Vue-CLI 3腳手架項目中的src目錄下新建plugin文件夾，在該文件夾下新建MessageBox.vue，代碼如例1-1所示。

例1-1 MessageBox.vue

<template>
  <div class="messageBox">
    <h2>{{title}}</h2>
    <div>
      <div class="ok" @click="handleOk">{{ok}}</div>
      <div class="cancel" @click="handleCancel" v-if="cancel">{{cancel}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageBox",
  props: [""],
  data() {
    return {
      title: '',
      ok: '',
      cancel: ''
    };
  }
}
</script>

可以看到，該組件內的數據屬性都沒有值，我們稍后會給該組件的數據屬性設置默認值。在組件內，對數據屬性cancel進行判斷，如果計算為假，則不渲染"取消"按鈕。

我們知道Vue.extend()方法可以創建一個組件的"子類"，我們可以利用這個"子類"來構造一個提示框組件對象，并設置組件的數據屬性的默認值。如下所示：

let MessageBoxImpl=Vue.extend(MessageBox);
// 調用showMessageBox函數時需要提供一個選項對象，
// 用于初始化組件內的各個選項
function showMessageBox(opts)
{
	let vm=new MessageBoxImpl({
	  el: document.createElement("div"), //創建一個組件掛載的根元素
	  data() {
	    return {
	      title: opts.title ? opts.title : '',
           ok: opts.ok ? opts.ok : '確定', 
           cancel: opts.cancel ? opts.cancel : ''
	    }
	  },
	  methods: {
	    handleOk(){
	      if(opts.handleOk)
	      	// 如果外部指定了“確定”按鈕的點擊事件處理函數，
	      	// 則調用它，使用組件的this進行綁定
              opts.handleOk.call(this);
           // 點擊“確定”按鈕時，從DOM中刪除提示框組件
           document.body.removeChild(vm.$el);
	    },
	    handleCancel(){
	      if(opts.handleCancel)
	      	// 如果外部指定了“取消”按鈕的點擊事件處理函數，
	      	// 則調用它，使用組件的this進行綁定
              opts.handleCancel.call(this);
           // 點擊“取消”按鈕時，從DOM中刪除提示框組件
           document.body.removeChild(vm.$el);
	    }
	  }
	});
	// 將組件綁定的根元素添加到HTML body元素內
	document.body.appendChild(vm.$el)
}

對上述代碼進一步改良，使用閉包函數調用返回一個對外的接口。如下所示：

(function(){
   // 組件數據屬性和事件響應函數的默認值
  let defaults={
    title: '',
    ok: '確定',
    cancel: '',
    handleOk: function(){},
    handleCancel: function(){}
  }
  
  let MessageBoxImpl=Vue.extend(MessageBox);
  return function(opts){ //配置參數
    for(let attr in opts){
      defaults[attr]=opts[attr];
    }

    let vm=new MessageBoxImpl({
      el: document.createElement("div"),  // 創建一個組件掛載的根元素
      data() {
        return {
          title: defaults.title,
          ok: defaults.ok,
          cancel: defaults.cancel, 
        }
      },
      methods: {
        handleOk(){
          defaults.handleOk.call(this);
          document.body.removeChild(vm.$el);
        },
        handleCancel(){
          defaults.handleCancel.call(this);
          document.body.removeChild(vm.$el);
        }
      }
    });
    document.body.appendChild(vm.$el)
  }
})();

接下來將上述代碼封裝為Vue的插件，Vue的插件開發很簡單，只需要按照如下形式編寫代碼即可。

MyPlugin.install=function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod=function () {
    // 邏輯...
  }

  // 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入組件選項
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 添加實例方法
  Vue.prototype.$myMethod=function (methodOptions) {
    // 邏輯...
  }
}

按照上述插件開發形式編寫消息提示框插件，在plugin目錄下新建vue-msgbox.js，完整的代碼如例1-2所示。

例1-2 vue-msgbox.js

import MessageBox from './MessageBox'

const msgBox={};

msgBox.install=function(Vue){
  Vue.prototype.$msgBox=msgBox;
  msgBox.show=(function(){
    // 組件數據屬性和事件響應函數的默認值
    let defaults={
      title: '',
      ok: '確定',
      cancel: '',
      handleOk: function(){},
      handleCancel: function(){}
    }
    
    let MessageBoxImpl=Vue.extend(MessageBox);
    // 調用msgBox.show函數時需要提供一個選項對象，
    // 用于初始化組件內的各個選項
    return function(opts){ //配置參數
      for(let attr in opts){
        defaults[attr]=opts[attr];
      }
  
      let vm=new MessageBoxImpl({
        el: document.createElement("div"),  // 創建一個組件掛載的根元素
        data() {
          return {
            title: defaults.title,
            ok: defaults.ok,
            cancel: defaults.cancel, 
          }
        },
        methods: {
          handleOk(){
            defaults.handleOk.call(this);
            // 點擊“確定”按鈕時，從DOM中刪除提示框組件
            document.body.removeChild(vm.$el);
          },
          handleCancel(){
            defaults.handleCancel.call(this);
            // 點擊“取消”按鈕時，從DOM中刪除提示框組件
            document.body.removeChild(vm.$el);
          }
        }
      });
      // 將組件綁定的根元素添加到HTML body元素內
      document.body.appendChild(vm.$el)
    }
  })();
  
}
export default msgBox;

接下來引入和安裝vue-msgbox插件，編輯main.js文件，添加如下的代碼：

import msgBox from './plugin/vue-msgbox'
Vue.use(msgBox)

使用插件彈出消息提示框如圖1-1所示。

圖1-1 消息提示框

.basic基礎組件

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 | 是否為時間范圍選擇，僅對`<el-time-picker>`有效 | boolean | — | false |
| arrow-control | 是否使用箭頭進行時間選擇，僅對`<el-time-picker>`有效 | boolean | — | false |
| 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 進度條

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，調用參數與全局方法相同。

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 標簽頁

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 | 下拉列表，通常是 `<el-dropdown-menu>` 組件 |
### 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 關閉動畫結束時的回調 | — |

在線咨詢

上一篇：JavaScript 數學運算和模板引擎-under
下一篇：javascript實現web通訊的幾種方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

8000字 - 詳解 Tkinter 的 GUI 界

效果展示

Tkinter簡介

Tkinter常用組件使用介紹

1. Button（按鈕控件）

2. Label（標簽控件）

3. Entry（文本框）

Tkinter常用幾何管理方法使用介紹

1. pack()

2. grid()

3. place()

Tkinter實現彈窗提示

Tkinter案例講解

程序打包與代碼獲取

ue的消息提示框插件

.basic基礎組件

Button 按鈕

Link 文字鏈接

二.Form 表單

Radio 單選框

Checkbox 多選框

Input 輸入框

InputNumber 計數器

Select 選擇器

Cascader 級聯選擇器

Switch 開關

Slider 滑塊

TimePicker 時間選擇器

DatePicker 日期選擇器

DateTimePicker 日期時間選擇器

Upload 上傳

Rate 評分

ColorPicker 顏色選擇器

Transfer 穿梭框

Form 表單

三.data 數據

Table 表格

Tag 標簽

Progress 進度條

Tree 樹形控件

Pagination 分頁

Badge 標記

Avatar 頭像

四.Notice 通知

Alert 警告

Loading 加載

Message 消息提示

MessageBox 彈框

Notification 通知

五.Navigation導航

NavMenu 導航菜單

Tabs 標簽頁

Breadcrumb 面包屑

PageHeader 頁頭

Dropdown 下拉菜單

Steps 步驟條

六.other其他組件

Dialog 對話框

Tooltip 文字提示

Popover 彈出框

Popconfirm 氣泡確認框

Card 卡片

Carousel 走馬燈

Collapse 折疊面板

Timeline 時間線

Divider 分割線

Calendar 日歷

Image 圖片

Backtop 回到頂部

InfiniteScroll 無限滾動

Drawer 抽屜

您的項目需求