.前言

道友能來到此處，證明你我有緣，既然如此，我想送你一場造化！

本系列文章主要分享個人在多年中后臺前端開發(fā)中，對于表單與列表封裝的一些探索以及實踐.本系列分享是基于vue3+element-plus，設(shè)計方案可能無法滿足所有人的需求，但是可以解決大部分人業(yè)務(wù)中的開發(fā)需求．主要還是希望通過分享能夠得到一些新的反饋與啟發(fā)，進(jìn)一步完善改進(jìn)，分享中夯實己身，在反饋中不斷成長．時間原因文章會不定期更新，有空就寫．下面先展示一下一個完整的常見的表單+表格集成的列表頁面開發(fā)的場景,然后再拆解ElTable表格的二次封裝實現(xiàn)封裝.

示例代碼展示:

DemoService.ts

 export function queryPlatformList() {
 const platformList=[
   { name: "淘寶", code: "taobao" },
   { name: "京東", code: "jd" },
   { name: "抖音", code: "douyin" },
 ];
 return platformList;
}

const dataList: any[]=[
 {
   id: 1,
   channelType: "sms",
   channelName: "阿里短信通知",
   platforms: queryPlatformList().filter((item)=> item.code !=="taobao"),
   status: 1,
   createTime: "2021-09-07 00:52:15",
   updateTime: "2021-11-07 00:52:15",
   createBy: "vshen",
   updateBy: "vshen",
   ext: {
     url: "https://sms.aliyun.com",
     account: "vshen",
     password: "vshen57",
     sign: "signVhsen123124",
   },
 },
 {
   id: 2,
   channelType: "dingtalk",
   channelName: "預(yù)警消息釘釘通知",
   platforms: queryPlatformList().filter((item)=> item.code !=="jingdong"),
   status: 1,
   createTime: "2021-11-10 00:52:15",
   updateTime: "2021-11-07 00:52:15",
   createBy: "vshen",
   updateBy: "vshen",
   ext: {
     accessType: "webhook",
     address: "https://dingtalk.aliyun.com",
   },
 },
 {
   id: 3,
   channelType: "email",
   channelName: "預(yù)警消息郵件通知",
   platforms: queryPlatformList().filter((item)=> item.code !=="douyin"),
   status: 0,
   ext: {
     host: "https://smpt.aliyun.com",
     account: "vshen@qq.com",
     password: "vshen@360.com",
   },
   createTime: "2021-11-07 00:52:15",
   updateTime: "2021-11-07 00:52:15",
   createBy: "vshen",
   updateBy: "vshen",
 },
];

export function queryPage({ form }: any, pagenation: any) {
 return new Promise((resolve)=> {
   let result: any[]=dataList;
   Object.keys(form).forEach((key)=> {
     const value=form[key];
     result=dataList.filter((item)=> item[key]==value);
   });

   resolve({ success: true, data: { list: result } });
 });
}
export function create(data: any={}) {
 return new Promise((resolve)=> {
   setTimeout(()=> {
     dataList.push({
       id: Date.now(),
       platform: [],
       ...data,
     });
     resolve({ success: true, message: "創(chuàng)建成功!" });
   }, 500);
 });
}

export function update(data: any) {
 return new Promise((resolve)=> {
   setTimeout(()=> {
     const index=dataList.findIndex((item)=> item.id==data.id);
     const target=dataList[index];
     Object.keys(data).forEach((key)=> {
       target[key]=data[key];
     });
     dataList.splice(index, 1, target);
     resolve({ success: true, message: "更新成功!" });
     console.log("update", dataList);
   }, 500);
 });
}

export function remove(id: number) {
 return new Promise((resolve)=> {
   setTimeout(()=> {
     const index=dataList.findIndex((item)=> item.id==id);
     dataList.splice(index, 1);
     resolve({ success: true, message: "刪除成功!" });
     console.log("remove", dataList);
   }, 500);
 });
}

FormDialog.ts(實現(xiàn)示例中的新增/編輯的動態(tài)表單)

import { createFormDialog } from "@/components/Dialogs";
import { Toast } from "@/core/adaptor";
import * as DemoService from "@/api/demo-service";

export const ChannelEnum: any={
 sms: "短信通知",
 dingtalk: "釘釘通知",
 email: "郵件通知",
};

export const AccessTypeEnum: any={
 webhook: "webhook",
 api: "api",
};

const DingtalkVisiable=(formData: any)=> formData.channelType=="dingtalk";

const DingtalkApiVisiable=(formData: any)=> {
 return (
   DingtalkVisiable(formData) && formData.accessType==AccessTypeEnum.api
 );
};

const DingtalkWebhookVisiable=(formData: any)=> {
 return (
   DingtalkVisiable(formData) && formData.accessType==AccessTypeEnum.webhook
 );
};

const DingTalkFormItems=[
 {
   label: "接入方式",
   field: "accessType",
   visiable: DingtalkVisiable,
   uiType: "selector",
   props: {
     options: AccessTypeEnum,
   },
 },
 {
   label: "webhHook地址",
   field: "address",
   required: true,
   visiable: DingtalkWebhookVisiable,
   uiType: "input",
 },
 {
   label: "appKey",
   field: "appKey",
   visiable: DingtalkApiVisiable,
   uiType: "input",
 },
 {
   label: "appSecret",
   field: "appSecret",
   visiable: DingtalkApiVisiable,
   uiType: "input",
 },
 {
   label: "clientId",
   field: "clientId",
   visiable: DingtalkApiVisiable,
   uiType: "input",
 },
 {
   label: "釘釘群ID",
   field: "chatId",
   visiable: DingtalkApiVisiable,
   uiType: "input",
 },
];

/*******
支持的規(guī)則描述
interface RuleType {
 equals?: string;
 not?: string;
 in?: string;
 notIn?: string;
 includes?: string | string[];
 excludes?: string | string[];
 empty?: boolean;
 lt?: number;
 lte?: number;
 gt?: number;
 gte?: number;
}
* 
* 
* ********/

const SmsVisiable={
 channelType: {
   equals: "sms",
 },
};

const SmsFormItems=[
 {
   label: "消息推送地址",
   field: "url",
   visiable: SmsVisiable,
   uiType: "input",
 },
 {
   label: "賬號",
   field: "account",
   visiable: SmsVisiable,
   uiType: "input",
 },
 {
   label: "密碼",
   field: "password",
   visiable: SmsVisiable,
   uiType: "input",
 },
 {
   label: "簽名",
   field: "sign",
   initValue: "signature",
   visiable: SmsVisiable,
   uiType: "input",
 },
];

const EmailVisiable=(formData: any)=> formData.channelType=="email";

const EmailFormItems=[
 {
   label: "smtp服務(wù)器地址",
   field: "host",
   visiable: EmailVisiable,
   uiType: "input",
 },
 {
   label: "郵箱賬號",
   field: "account",
   visiable: EmailVisiable,
   uiType: "input",
 },
 {
   label: "郵箱密碼",
   field: "password",
   visiable: EmailVisiable,
   uiType: "input",
 },
];

function createFormItems(isEditMode: boolean, extJson: any=null) {
 return [
   {
     label: "渠道名稱",
     field: "channelName",
     uiType: "input",
     required: true,
   },
   {
     label: "渠道類型",
     field: "channelType",
     required: true,
     uiType: "selector",
     disabled: isEditMode,
     props: {
       options: ChannelEnum,
     },
   },
   ...DingTalkFormItems,
   ...SmsFormItems,
   ...EmailFormItems,
   {
     label: "應(yīng)用于平臺",
     field: "platforms",
     required: true,
     uiType: "selector",
     props: {
       multiple: true,
       options: ()=> DemoService.queryPlatformList(),
     },
   },
 ];
}
export async function createOrUpdateChannel(row: any, table: any) {
 const isEditMode=!!row;
 let rowData=null;
 if (isEditMode) {
   rowData={
     ...row,
     ...row.ext,
     platforms: row.platforms.map((item: any)=> item.code),
   };
 }
 const dialogInsatcne=createFormDialog({
   dialogProps: {
     title: isEditMode ? "編輯渠道" : "新增渠道",
   },
   formProps: {
     labelWidth: 130,
     primaryKey: "id",//編輯操作需要傳給后端用來更新的主鍵，不傳默認(rèn)為id
   },
   formItems: createFormItems(isEditMode, rowData),
 });

 dialogInsatcne.open(rowData)
 .onConfirm((formData: any)=> {
    /****
    *只有表單所有必填字段校驗通過才會調(diào)用此回調(diào)函數(shù)
    *formData只包含可視的字段與primaryKey,保證數(shù)據(jù)干凈
    ****/
    
   const action=!isEditMode ? "create" : "update";
   DemoService[action](formData).then(({ success, errorMsg })=> {
     if (!success) {
       Toast.error(errorMsg);
       return;
     }
     Toast.success(errorMsg);
     table.refresh();
     dialogInsatcne.close();
   });
 })
 .onClose(()=>{});
}

demo-list-page.vue

 <template>
  <list-page v-bind="table">
    <template #expand="{ row }">
      <el-table :data="row.platforms" border stripe style="padding: 10px; width: 100%">
        <el-table-column label="平臺名稱" prop="name" />
        <el-table-column label="平臺編碼" prop="code" />
      </el-table>
    </template>
    <template #status="{ row }">
      <el-tag :type="row.status==1 ? 'info' : 'danger'">{{ statusEnum[row.status] }}
      </el-tag>
    </template>
  </list-page>
</template>
<script setup lang="ts">
import { Toast, Dialog } from "@/core/adaptor";
import * as demoService from "@/api/demo-service";
import { createOrUpdateChannel, ChannelEnum } from "./formDialog";

const statusEnum: any={
  0: "禁用",
  1: "啟用",
};

const table=reactive({
  //支持el-table的所有屬性
  props: {},
  //支持el-table的所有事件
  events: {},

  loader: (queryForm, pagenation): any=> demoService.queryPage(queryForm, pagenation),
  //過濾條件選項
  filterItems: [
    {
      label: "渠道類型",
      field: "channelType",
      uiType: "selector",
      props: { options: ChannelEnum },
    },
    {
      label: "啟用狀態(tài)",
      field: "status",
      uiType: "selector",
      props: { options: statusEnum },
    },
    {
      label: "創(chuàng)建時間",
      field: ["stratTime", "endTime"],
      uiType: "dateTimePicker",
      props: {
        type: "daterange",
      },
    },
  ],

  columns: [
    { type: "selection", label: "全選" },
    { type: "index", label: "序號" },
    { type: "expand", label: "使用平臺" },
    { label: "渠道名稱", key: "channelName" },

    {
      label: "通知方式",
      key: "channelType",
      formatter: (row)=> ChannelEnum[row.channelType],
    },
    {
      label: "密鑰",
      text: "查看密鑰",
      click: ()=> {
        Toast("查看密鑰");
      },
    },
    { label: "啟用狀態(tài)", slot: "status" },
    { label: "創(chuàng)建時間", key: "createTime" },
    { label: "創(chuàng)建人", key: "createBy" },
    { label: "更新時間", key: "updateTime" },
    { label: "更新人", key: "updateBy" },
  ],
  toolbar: [
    {
      text: "新增消息渠道",
      click: (table: any, searchForm: any)=> createOrUpdateChannel(null, table),
    },
    {
      text: "批量刪除",
      click: (table: any)=> {
        const rows=table.instance.getSelectionRows();
        if (rows.length==0) {
          Toast.info(`請先選擇要刪除的數(shù)據(jù)`);
          return;
        }
        Dialog.confirm(
          `確定要刪除消息渠道配置${rows.map((row)=> row.channelName)}嗎?`
        ).then((res)=> {
          if (res !="confirm") {
            return;
          }
          table.refresh();
        });
      },
    },
  ],
  actions: [
    {
      text: "編輯",
      props: { type: "warning" },
      click: ({ row }: any, table: any)=> createOrUpdateChannel(row, table),
    },
    {
      text: (row)=> (row.status==1 ? "禁用" : "啟用"),
      props: (row)=> (row.status==1 ? { type: "danger" } : { type: "success" }),
      confirm: (row)=> `確定${row.status==1 ? "禁用" : "啟用"}${row.channelName}嗎?`,
      click: ({ row }: any, table: any, searchForm: any)=> {
        demoService
          .update({ id: row.id, status: row.status==1 ? 0 : 1 })
          .then(({ success, message })=> {
            const action=success ? "success" : "error";
            Toast[action](message);
            success && table.refresh();
          });
      },
    },
  ],
});
</script>

至于此種開發(fā)方式對開發(fā)效率有沒有提升,看完上面示例的代碼后讀者朋友可以嘗試實現(xiàn)圖示中的效果,然后從時間耗費、代碼量、拓展性與可維護(hù)性等多個維度做下對比，本示例開發(fā)連同構(gòu)造數(shù)據(jù)模擬花了差不多2h，因為思考示例中如何才能將封裝的東西更多地展現(xiàn)出來，也稍微花了點時間。社區(qū)中確實看到有很不少人對這種配置式開發(fā)嗤之以鼻，但是在我看來至少有以下幾個優(yōu)點：

1. 統(tǒng)一了項目中的列表頁開發(fā)規(guī)范,無論誰開發(fā)都可以保證每一個列表頁面其他人都可以看得懂,改得動。
2. 在前端人手不足情況下，即使后端不會css跟布局，只要給與相關(guān)文檔看一下，也能動手寫出一樣的列表頁面開發(fā)（后端開發(fā)的道友對不住了，哈哈哈）
3. 沒有一個功能代碼需要反復(fù)橫跳查看的,每一個方法邏輯都可以很好很清晰的剝離與替換，解耦業(yè)務(wù)邏輯。例如示例中的新增與編輯操作，將相關(guān)業(yè)務(wù)邏輯內(nèi)聚，從頁面代碼中剝離出來單獨維護(hù)，需求變動時任何方法都可以很方便地直接拿掉或者重寫，無需擔(dān)心會影響其他業(yè)務(wù)代碼。

2.代碼拆解

接下來我們進(jìn)入主題，拆解下(ListPage.vue)這個頁面的組件分封裝。對于頁面展示的各個部分，在代碼封裝設(shè)計上我們按照圖示中圈出來的各個部分來做封裝設(shè)計。

代碼組織如下：

1. 列表頁面 （ListPage.vue）

整個列表列頁面在設(shè)計上主要由SearchForm、Toolbar、Pagenation、ElTablePlus、TableCustomSetting幾個部分組合而成，整體代碼量不多，完整代碼如下：

<template>
  <div ref="listPageRef" class="list-page">
    <!-- 搜索框 -->
    <SearchForm v-show="props.filterItems?.length > 0" v-model:height="searchFormHeight" :filterItems="props.filterItems"
      @search="diapatchSearch">
    </SearchForm>
    <!--  -->
    <el-row class="table-grid" justify="start" flex>
      <!-- 表格操作 -->
      <div class="toolbar-actions">
        <el-button v-for="action in props.toolbar"
          v-bind="Object.assign({ size: 'small', type: 'primary' }, action.props)"
          @click="()=> action.click(tableInstance, {})">
          <el-icon style="vertical-align: middle" v-if="action.props && action.props.icon">
          </el-icon>
          <span>{{ action.text }}</span>
        </el-button>
        <el-button type="warning" size="small" @click="refreshTableData(searchFormModel)">
          <el-icon style="vertical-align: middle">
            <Refresh />
          </el-icon>
        </el-button>
        <el-button type="info" size="small" @click.stop="tableSettingDialog.open()">
          <el-icon style="vertical-align: middle">
            <Setting />
          </el-icon>
        </el-button>
        <el-button type="success" size="small" @click="requestFullScreen.toggle()">
          <el-icon style="vertical-align: middle">
            <FullScreen />
          </el-icon>
        </el-button>
      </div>
      <!-- 表格主體 -->
      <el-table-plus ref="tableInstance" :data="tableData.list" :is-loading="tableData.isLoading" :columns="tableColumns"
        :tableHeight="tableHeight" :props="props.props" :events="props.props"
        v-bind="Object.assign($attrs.props || {}, {})" @refresh="()=> refreshTableData(searchFormModel)">
        <template v-for="column in tableColumns.filter((col)=> col.slot)" #[column.slot]="{ row, col, index }">
          <slot :name="column.slot" :row="row" :col="col" :index="index"></slot>
        </template>
      </el-table-plus>
      <!-- 分頁 -->
      <Pagenation type="custom" :pagenation="searchFormModel.pagenation" :total="tableData.total"
        @change="onPagenationChange" v-model:height="pagenationHeight">
      </Pagenation>
    </el-row>

    <TableCustomSettingDialog ref="tableSettingDialog" v-model:columns="tableColumns" @refresh-column="refreshColumn"
      @reset="resetColumns" />
  </div>
</template>
<script setup lang="ts">
import SearchForm from "@/components/Forms/SearchForm.vue";
import Pagenation from "./components/Pagenation.vue";
import ElTablePlus from "@/components/Table/Table.vue";
import TableCustomSettingDialog from "./components/TableSettingDialog.vue";
import { FullScreen, Refresh, Setting } from "@element-plus/icons-vue";
import { useTable, ISearchForm } from "@/components/Table/useTable";
import { useColumn } from "@/components/Table/tableColumns";
import { useTableSetting } from "@/components/Table/tableCustomSetting";
import { useFullscreen } from "@vueuse/core";

export interface Action {
  text: string | Function;
  click: (row: any, table: any)=> {};
  props: any;
}

export interface IProps {
  loader: Function | Array<any>;
  filterItems?: any[];
  columns: any[];
  actions?: Action[];
  toolbar?: Action[];
  tableHeight?: string;
  props?: any;
  events?: any;
}

const props=withDefaults(defineProps<IProps>(), {
  props: {},
  events: {},
});

/**表格數(shù)據(jù)獲取與刷新邏輯**/
const searchFormModel=reactive<ISearchForm>({
  form: {},
  pagenation: { pageNum: 1, pageSize: 20 },
});

const { tableData, refreshTableData }=useTable(
  props.loader,
  props.filterItems?.length > 0 ? null : searchFormModel
);

const onPagenationChange=({ pageNum, pageSize })=> {
  searchFormModel.pagenation.pageNum=pageNum;
  searchFormModel.pagenation.pageSize=pageSize;
  refreshTableData(searchFormModel);
};

const diapatchSearch=(form)=> {
  searchFormModel.form=form;
  searchFormModel.pagenation.pageNum=1;
  refreshTableData(searchFormModel);
};

const tableInstance=ref(null);
const tableSettingDialog=ref(null);

const { tableColumns, updateTableColumns }=useColumn(props.columns, props.actions);

const { refreshColumn, resetColumns }=useTableSetting(
  tableInstance,
  updateTableColumns
);

/***表格動態(tài)高度計算***/
const listPageRef=ref<HTMLElement>(null);
const searchFormHeight=ref(0);
const pagenationHeight=ref(0);
const tableHeight=ref(0);

const updateTableHeight=()=> {
  tableHeight.value=listPageRef.value?.clientHeight -
    searchFormHeight.value -
    pagenationHeight.value -
    50;
};

let cancelWatch=null;

onMounted(()=> {
  cancelWatch=watchEffect(()=> updateTableHeight());
  window.addEventListener("resize", ()=> nextTick(()=> updateTableHeight()));
});

onUnmounted(()=> {
  cancelWatch();
  window.removeEventListener("resize", ()=> nextTick(()=> updateTableHeight()));
});

const requestFullScreen=useFullscreen(listPageRef.value);
</script>

2. 列表數(shù)據(jù)請求（useTable.ts）

在實際開發(fā)過程中列表數(shù)據(jù)源可能來源于各個地方，可能是接口，也可能是手動枚舉的數(shù)據(jù)。設(shè)計上我們支持傳入數(shù)組與方法，這一層主要是對數(shù)據(jù)的輸入=>輸出做歸一化處理，減少應(yīng)用時對數(shù)據(jù)格式的心智負(fù)擔(dān)。 具體可以參考下面完整的代碼：

import { isArray, isFunction } from "@vue/shared";

export interface IPagination {
  pageSize: number;
  pageNum: number;
}
export interface ISearchForm {
  form?: any;
  pagenation: IPagination;
}

export interface TableData {
  list: any[];
  total: number;
  isLoading: boolean;
}

export function useTable(
  dataLoader: Function | any[],
  searchForm?: ISearchForm
) {
  const tableRef=ref<HTMLElement>();

  const tableData=reactive<TableData>({
    list: [],
    total: 0,
    isLoading: false,
  });

  async function requestTableData(dataLoader: any, searchForm: ISearchForm) {
    tableData.isLoading=true;

    if (!isArray(dataLoader) && !isFunction(dataLoader)) {
      console.error("----表格數(shù)據(jù)必須是方法或者數(shù)組----");
      return;
    }

    let promiseLoader=(searchForm)=>
      Promise.resolve(
        isArray(dataLoader) ? dataLoader : dataLoader(searchForm)
      );

    try {
      const result=await promiseLoader(searchForm);

      if (Array.isArray(result)) {
        tableData.list=result;
        tableData.total=result.length;
        tableData.isLoading=false;
        return;
      }

      const { success, data, rows }: any=result;

      if (!success) {
        tableData.list=[];
        tableData.total=0;
        tableData.isLoading=false;
        return;
      }
      tableData.list=Array.isArray(data) ? data : data.list || rows;
      tableData.total=data.total||tableData.list.length;
       
    } catch (error) {
      console.error(error);
    } finally {
      tableData.isLoading=false;
    }
  }

  function refreshTableData(searchFormModel={}) {
    requestTableData(
      dataLoader,
      Object.assign({}, searchFormModel, searchForm)
    );
  }

  if (searchForm) {
    requestTableData(dataLoader, searchForm);
  }

  return {
    tableRef,
    tableData,
    listData,
    requestTableData,
    refreshTableData,
  };
}

3. 列表列配置二次處理 （tableColumns.ts）

對列配置單獨提取出來做二次處理，可以方便我們做一些中間的轉(zhuǎn)換與列更新的操作的控制。對于業(yè)務(wù)開發(fā)中的一些開發(fā)拓展也很方便。(以我自身經(jīng)歷的一個業(yè)務(wù)場景來說，某項目需要支持私有化部署跟saas環(huán)境部署，但是有多個頁面在不同環(huán)境需要展示不同的字段。按照常規(guī)操作需要一個個頁面去讀取環(huán)境變量來做控制，操作起來就很復(fù)雜。我采用的就是在列配置上拓展一個環(huán)境支持的字段，然后在tableColumns引入環(huán)境變量做統(tǒng)一的過濾處理) 此外，這一層可以支持對多種UI框架的table組件進(jìn)行支持。例如列屬性字段，對應(yīng)到不同框架中有的可能是prop,有的是property,有的是field。

import { IColumnSetting } from "@/api/table-setting-service";
import { isFunction } from "@vue/shared";

export type FixedType="left" | "right" | "none" | boolean;

export type ElColumnType="selection" | "index" | "expand";

export type CustomColumnType="text" | "action";

export type ColumnType=ElColumnType | CustomColumnType;

export type Action={
  text: Function & string;
  click: Function;
} & {
  [key: string]: string;
};

export interface TColumn {
  label: string; // 列標(biāo)題 可以是函數(shù)或字符串，根據(jù)需要在頁面上顯示在列
  key?: string;
  property?: string; // 列的屬性, 如果沒有指定，則使用列名稱 如果是函數(shù)
  slot?: string;
  align?: string;
  width?: number | string; // 列寬度 可選參數(shù)，默認(rèn)為100 可以是整數(shù)或浮點數(shù)，但不
  minWidth?: number | string; // 最小列寬度 可選參數(shù)，默認(rèn)為10 可以是整數(shù)或浮點
  fixed?: FixedType; // 列寬對齊方式 left right none 默認(rèn)為left 可選參數(shù)，表示對齊方
  type?: string;
  actions?: any[];
  visiable?: boolean;
  click?: Function;
  text?: Function | string;
}

export type TableType="VXE-TABLE" | "EL-TABLE";

export type TColumnConfig={};

export const actionColumn: TColumn={
  label: "操作",
  fixed: "right",
  type: "action",
  visiable: true,
  actions: [],
};

export const computedActionName=(button: Action, row: TColumn)=> {
  return !isFunction(button.text)
    ? button.text
    : computed(()=> button.text(row)).value?.replace(/\"/g, "");
};

const tableColumns=ref<Array<TColumn>>([]);

export const specificTypes=["selection", "index", "expand"];

const calcColumnWidth=(columnsLength: number)=> {
  if (columnsLength <=6) return `${100 / columnsLength}%`;
  return `${12}%`;
};

const formatColumns=(columns: Array<TColumn>, actions: any[]=[])=> {
  const hasAction=actions?.length > 0;

  actionColumn.actions=[...actions];

  const _columns=hasAction ? [...columns, actionColumn] : [...columns];

  const newColumns=[];

  for (let column of _columns) {
    column=Object.assign({}, column);

    if (column.visiable==false) {
      continue;
    }

    column.property=column.key || column.slot;
    column.align=column.align || "center";
    column.visiable=true;
    column.width=column.width || "auto" || calcColumnWidth(_columns.length);

    if (specificTypes.includes(column.type)) {
      column.width=column.width || 60;
    }

    if (column.type==="expand") {
      column.slot=column.slot || "expand";
    }

    if (column.type==="action") {
      column.minWidth=100;
      column.fixed="right";
    }

    newColumns.push(column);
  }
  return newColumn;
};

const updateTableColumns=(columnSettings: IColumnSetting[])=> {
  if (columnSettings.length==0) return false;

  const columnSettingMap=new Map();

  columnSettings.forEach((col)=> columnSettingMap.set(col.field, col));

  tableColumns.value=tableColumns.value.map((col)=> {
    const colSetting=columnSettingMap.get(col.key) || {};
    Object.keys(colSetting).forEach((key)=> {
      col[key]=colSetting[key];
    });
    return col;
  });

  return true;
};

export function useColumn(columns: Array<TColumn>, actions: any[]) {
  tableColumns.value=formatColumns(columns, actions);
  console.log("tableColumns", tableColumns);
  return {
    tableColumns,
    updateTableColumns,
    computedActionName,
  };
}

4. 列表組裝(table.vue)

對el-table組件二次封裝,首先我們要保證對原組件所有的方法與屬性可以完全的支持,在不影響原組件的功能上增加拓展。這里用屬性/事件透傳，然后用v-bind，v-on分別做綁定即可實現(xiàn)。不清楚的道友可以看下官方的這兩個指令。在拓展上我們這里除了支持action,slot,還增加了一個click配置，這個主要針某個列展示的數(shù)據(jù)我們希望點擊的時候可以進(jìn)行跳轉(zhuǎn)等操作。所有配置的支持都是根據(jù)平時業(yè)務(wù)開發(fā)中的真實場景來設(shè)計的。看懂了下面的代碼，可以根據(jù)自己的業(yè)務(wù)進(jìn)行拓展支持。

<template>
  <el-table ref="tableInstance" :data="props.data" :loading="props.isLoading" v-on="Object.assign({}, $attrs.events)"
    v-bind="Object.assign(
      {
        tableLayout: 'auto',
        maxHeight: `${props.tableHeight}px`,
        border: true,
        stripe: true,
        resizable: true,
        key: Date.now(), //不配置key會存在數(shù)據(jù)更新頁面不更新
      },
      $attrs.props || {}
    )
      ">
    <template v-for="column in props.columns">
      <!-- 操作 -->
      <el-table-column v-if="column.type=='action'" v-bind="column" #default="scope">
        <template v-for="button in column.actions">
          <action-button :button="button" :scope="scope" @click="()=> button.click(scope, exposeObject)">
          </action-button>
        </template>
      </el-table-column>
      <el-table-column v-else-if="isFunction(column.click)" v-bind="column">
        <template #default="{ row, col, index }">
          <el-button v-bind="Object.assign({ type: 'primary', size: 'small' }, column.props || {})"
            @click="column.click(row, col, index)">
            {{
              isFunction(column.text)
              ? column.text(row, col, index)
              : column.text || row[column.key]
            }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column v-else-if="column.slot" v-bind="column">
        <template #default="{ row, col, $index }">
          <slot :name="column.slot" :row="row" :col="col" :index="$index" :key="$index">
              </slot>
        </template>
      </el-table-column>

      <el-table-column v-else v-bind="column"> </el-table-column>
    </template>
  </el-table>
</template>
<script setup lang="ts">
import { TColumn, Action } from "./tableColumns";
import { isFunction } from "@vue/shared";
import ActionButton from "./ActionButton.vue";
import { TableInstance } from "element-plus";
import { toValue } from "vue";

export interface Props {
  columns?: TColumn[];
  actions?: Action[];
  data?: any;
  isLoading: boolean;
  tableHeight: number;
 }

const props=withDefaults(defineProps<Props>(), {
  columns: ()=> [],
  actions:()=>[],
  data: ()=> [],
  tableHeight: 200,
  isLoading: false,
});

const emit=defineEmits(["refresh"]);

const refresh=()=> {
  emit("refresh");
};

const tableInstance=ref<TableInstance>();

const exposeObject: any=reactive({
  instance: tableInstance,
  refresh,
  selectionRows: toValue(computed(()=> tableInstance.value?.getSelectionRows())),
});

defineExpose(exposeObject);
</script>

5.操作列按鈕封裝 （action-button.vue）

對操作列中的按鈕單獨封裝，可以方便我們給操作提供更多豐富的個性化定制配置，根據(jù)項目中的需求而定，保證設(shè)計的靈活性

<template>
    <el-popconfirm v-if="confirmProps" v-bind="confirmProps" @confirm="handleConfirm(button, props.scope)">
        <template #reference>
            <el-button v-bind="buttonProps">
                {{ computedActionName(button, props.scope.row) }}
            </el-button>
        </template>
    </el-popconfirm>
    <el-button v-else v-bind="buttonProps" @click="handleConfirm(button, props.scope)">
        {{ computedActionName(button, props.scope.row) }}
    </el-button>
</template>
<script setup lang="ts">
import { Action, TColumn } from "./tableColumns";
import { isFunction, isString, isObject } from "@/components/utils/valueTypeCheck";

const props=withDefaults(
    defineProps<{ button: Action; scope: { row: any; col: any; $index: number } }>(),
    {}
);

const buttonProps=computed(()=> {
    let customeProps: any=props.button.props || {};

    return Object.assign(
        {
            marginRight: "10px",
            type: "primary",
            size: "small",
        },
        isFunction(customeProps) ? customeProps(props.scope.row) : customeProps
    );
});

const confirmProps=computed(()=> {
    const propsConfirm: any=props.button.confirm;
    if (propsConfirm===undefined) {
        return false;
    }

    if (!isString(propsConfirm) && !isObject(propsConfirm) && !isFunction(propsConfirm)) {
        console.error("confirmProps 類型錯誤");
        return {};
    }

    if (isString(propsConfirm)) {
        return {
            title: propsConfirm,
        };
    }

    if (isFunction(propsConfirm)) {
        const res=propsConfirm(props.scope.row);
        if (isObject(res)) {
            return res;
        }
        if (isString(res)) {
            return {
                title: res,
            };
        }
    }

    if (isObject(propsConfirm) && propsConfirm.title !==undefined) {
        return isFunction(propsConfirm.title)
            ? {
                ...propsConfirm,
                title: propsConfirm.title(props.scope.row),
            }
            : propsConfirm;
    }
    console.error("confirmProps 類型錯誤");
});

const emits=defineEmits(["click"]);

const handleConfirm=(button, scope: any)=> {
    if (isFunction(button.click)) {
        emits("click");
    }
};

const computedActionName=(button: Action, row: TColumn)=> {
    return !isFunction(button.text)
        ? button.text
        : computed(()=> button.text(row)).value?.replace(/\"/g, "");
};
</script>

6.列表個性化定制封裝 （tableSettingDrawer.vue）

個性化定制也是列表常見的需求之一，對于B端業(yè)務(wù)可能會有不同角色對同一個列表操作的需求，但是相互之間所關(guān)注的信息可能不一樣。這部分主要是控制對應(yīng)搜索條件與列表的列展示進(jìn)行個性化定制。對于存儲設(shè)計的話可以用當(dāng)前頁面的路由訪問路徑作為鍵來保存，如果同個頁面彈窗中還有列表，設(shè)計上可以用routePath+id方式來保存，給彈窗中的列表加個id即可。

<template>
  <el-drawer v-model="dialogVisible" title="個性化定制" direction="rtl" size="50%">
    <el-tabs v-model="currentTab">
      <el-tab-pane label="定制列" class="setting-content" name="list" @keyup.enter="confirm(originColumns)">
        <el-table :data="originColumns" style="width: 100%" table-layout="auto" border stripe resizable
          default-expand-all>
          <template v-for="column in colunms">
            <el-table-column v-bind="column" #default="{ row, col, $index }">
              <span v-if="column.uiType=='text'">{{ row.label }}</span>
              <!-- 輸入框 -->
              <el-input v-else-if="column.uiType=='input'" v-model="row[column.field]"
                :placeholder="`請輸入${column.label}`"></el-input>
              <!-- 選擇器 -->
              <el-select v-else-if="column.uiType=='select'" v-model="row[column.field]"
                :placeholder="`請選擇${column.label}`">
                <el-option v-for="option in column.options" :key="option.value" :label="option.name"
                  :value="option.value"></el-option>
              </el-select>
              <!-- 多選 -->
              <el-switch v-else-if="column.uiType=='switch'" v-model="row[column.field]"></el-switch>
            </el-table-column>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="定制查詢條件" name="condition"> </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button @click="$emit('reset', false)">恢復(fù)默認(rèn)設(shè)置</el-button>
        <el-button type="primary" @click="confirm(originColumns)">確定</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
const currentTab=ref("list");

interface IProps {
  tableRef?: Element;
  columns: any[];
  modelValue?: boolean;
}

const props=withDefaults(defineProps<IProps>(), {
  columns: ()=> [],
  modelValue: false,
});

const deepCopy=(data)=> {
  return JSON.parse(JSON.stringify(data));
};

/**采用computed可以實現(xiàn)異步獲取配置實時更新**/
const originColumns=computed(()=> deepCopy(props.columns));

const emit=defineEmits([
  "update:modelValue",
  "update:columns",
  "refreshColumn",
  "reset",
]);

const confirm=(tableColumns)=> {
  const columns=deepCopy(tableColumns);
  emit("update:modelValue", false);
  emit("update:columns", columns);
  emit("refreshColumn", columns);
};

const colunms=[
  { field: "seq", label: "排序", width: 60 },
  { field: "visible", label: "是否展示", uiType: "switch", width: 120 },
  { field: "label", label: "列名", uiType: "text" },
  { field: "width", label: "寬度", uiType: "input" },
  {
    field: "align",
    label: "對齊方式",
    uiType: "select",
    options: [
      { value: "left", name: "左對齊" },
      { value: "right", name: "右對齊" },
      { value: "center", name: "居中" },
    ],
  },
  {
    field: "fixed",
    label: "固定類型",
    uiType: "select",
    options: [
      { value: "left", name: "左側(cè)" },
      { value: "right", name: "右側(cè)" },
      { value: "none", name: "不固定" },
    ],
  },
];

const dialogVisible=ref(false);

const open=()=> {
  dialogVisible.value=true;
};

const close=()=> {
  dialogVisible.value=false;
};

defineExpose({
  open,
  close,
});
</script>

至此，ElTable二次封裝相關(guān)代碼已經(jīng)結(jié)束。希望此中代碼能夠助各位道友在表格二次封裝的設(shè)計開發(fā)修煉中能有所幫助。一切大道,皆有因果。喜歡的話,可以動動你的小手點點贊。修行路上愿我們都不必獨伴大道，回首望去無故人。

下期預(yù)告：動態(tài)表單設(shè)計封裝，敬請期待

本文已首發(fā)掘金社區(qū)，純原創(chuàng)文章，轉(zhuǎn)載請聲明來源

.basic基礎(chǔ)組件

Button 按鈕

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | medium / small / mini | — |
| type | 類型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否樸素按鈕 | boolean | — | false |
| round | 是否圓角按鈕 | boolean | — | false |
| circle | 是否圓形按鈕 | boolean | — | false |
| loading | 是否加載中狀態(tài) | boolean | — | false |
| disabled | 是否禁用狀態(tài) | boolean | — | false |
| icon | 圖標(biāo)類名 | string | — | — |
| autofocus | 是否默認(rèn)聚焦 | boolean | — | false |
| native-type | 原生 type 屬性 | string | button / submit / reset | button |

Link 文字鏈接

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| type | 類型 | string | primary / success / warning / danger / info | default |
| underline | 是否下劃線 | boolean | — | true |
| disabled | 是否禁用狀態(tài) | boolean | — | false |
| href | 原生 href 屬性 | string | — | - |
| icon | 圖標(biāo)類名 | string | — | - |

二.Form 表單

Radio 單選框

### Radio Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| 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
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 綁定值變化時觸發(fā)的事件 | 選中的 Radio label 值 |
### Radio-group Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| 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
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 綁定值變化時觸發(fā)的事件 | 選中的 Radio label 值 |
### Radio-button Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 屬性 | string | — | — |

Checkbox 多選框

### Checkbox Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 綁定值 | string / number / boolean | — | — |
| label | 選中狀態(tài)的值（只有在`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 | 當(dāng)前是否勾選 | boolean | — | false |
| indeterminate | 設(shè)置 indeterminate 狀態(tài)，只負(fù)責(zé)樣式控制 | boolean | — | false |
### Checkbox Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 當(dāng)綁定值變化時觸發(fā)的事件 | 更新后的值 |
### Checkbox-group Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 綁定值 | array | — | — |
| size | 多選框組尺寸，僅對按鈕形式的 Checkbox 或帶有邊框的 Checkbox 有效 | string | medium / small / mini | — |
| disabled | 是否禁用 | boolean | — | false |
| min | 可被勾選的 checkbox 的最小數(shù)量 | number | — | — |
| max | 可被勾選的 checkbox 的最大數(shù)量 | number | — | — |
| text-color | 按鈕形式的 Checkbox 激活時的文本顏色 | string | — | #ffffff |
| fill | 按鈕形式的 Checkbox 激活時的填充色和邊框色 | string | — | #409EFF |
### Checkbox-group Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 當(dāng)綁定值變化時觸發(fā)的事件 | 更新后的值 |
### Checkbox-button Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 選中狀態(tài)的值（只有在`checkbox-group`或者綁定對象類型為`array`時有效）| string / number / boolean | — | — |
| true-label | 選中時的值 | string / number | — | — |
| false-label | 沒有選中時的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 屬性 | string | — | — |
| checked | 當(dāng)前是否勾選 | boolean | — | false |

Input 輸入框

### Input Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| 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 | 是否顯示輸入字?jǐn)?shù)統(tǒng)計，只在 `type="text"` 或 `type="textarea"` 時有效 | boolean | — | false |
| placeholder | 輸入框占位文本 | string | — | — |
| clearable | 是否可清空 | boolean | — | false |
| show-password | 是否顯示切換密碼圖標(biāo)| boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| size | 輸入框尺寸，只在 `type!="textarea"` 時有效 | string | medium / small / mini | — |
| prefix-icon | 輸入框頭部圖標(biāo) | string | — | — |
| suffix-icon | 輸入框尾部圖標(biāo) | string | — | — |
| rows | 輸入框行數(shù)，只對 `type="textarea"` 有效 | number | — | 2 |
| autosize | 自適應(yīng)內(nèi)容高度，只對 `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 | 原生屬性，設(shè)置最大值 | — | — | — |
| min | 原生屬性，設(shè)置最小值 | — | — | — |
| step | 原生屬性，設(shè)置輸入字段的合法數(shù)字間隔 | — | — | — |
| resize | 控制是否能被用戶縮放 | string | none, both, horizontal, vertical | — |
| autofocus | 原生屬性，自動獲取焦點 | boolean | true, false | false |
| form | 原生屬性 | string | — | — |
| label | 輸入框關(guān)聯(lián)的label文字 | string | — | — |
| tabindex | 輸入框的tabindex | string | - | - |
| validate-event | 輸入時是否觸發(fā)表單的校驗 | boolean | - | true |
### Input Slots
| name | 說明 |
|------|--------|
| prefix | 輸入框頭部內(nèi)容，只對 `type="text"` 有效 |
| suffix | 輸入框尾部內(nèi)容，只對 `type="text"` 有效 |
| prepend | 輸入框前置內(nèi)容，只對 `type="text"` 有效 |
| append | 輸入框后置內(nèi)容，只對 `type="text"` 有效 |
### Input Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| blur | 在 Input 失去焦點時觸發(fā) | (event: Event) |
| focus | 在 Input 獲得焦點時觸發(fā) | (event: Event) |
| change | 僅在輸入框失去焦點或用戶按下回車時觸發(fā) | (value: string \| number) |
| input | 在 Input 值改變時觸發(fā) | (value: string \| number) |
| clear | 在點擊由 `clearable` 屬性生成的清空按鈕時觸發(fā) | — |
### Input Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | — |
| blur | 使 input 失去焦點 | — |
| select | 選中 input 中的文字 | — |
### Autocomplete Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| 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 | 返回輸入建議的方法，僅當(dāng)你的輸入建議數(shù)據(jù) resolve 時，通過調(diào)用 callback(data:[]) 來返回它 | Function(queryString, callback) | — | — |
| popper-class | Autocomplete 下拉列表的類名 | string | — | — |
| trigger-on-focus | 是否在輸入框 focus 時顯示建議列表 | boolean | — | true |
| name | 原生屬性 | string | — | — |
| select-when-unmatched | 在輸入沒有任何匹配建議的情況下，按下回車是否觸發(fā) `select` 事件 | boolean | — | false |
| label | 輸入框關(guān)聯(lián)的label文字 | string | — | — |
| prefix-icon | 輸入框頭部圖標(biāo) | string | — | — |
| suffix-icon | 輸入框尾部圖標(biāo) | string | — | — |
| hide-loading | 是否隱藏遠(yuǎn)程加載時的加載圖標(biāo) | boolean | — | false |
| popper-append-to-body | 是否將下拉列表插入至 body 元素。在下拉列表的定位出現(xiàn)問題時，可將該屬性設(shè)置為 false | boolean | - | true |
| highlight-first-item | 是否默認(rèn)突出顯示遠(yuǎn)程搜索建議中的第一項 | boolean | — | false |
### Autocomplete Slots
| name | 說明 |
|------|--------|
| prefix | 輸入框頭部內(nèi)容 |
| suffix | 輸入框尾部內(nèi)容 |
| prepend | 輸入框前置內(nèi)容 |
| append | 輸入框后置內(nèi)容 |
### Autocomplete Scoped Slot
| name | 說明 |
|------|--------|
| — | 自定義輸入建議，參數(shù)為 { item } |
### Autocomplete Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| select | 點擊選中建議項時觸發(fā) | 選中建議項 |
| change | 在 Input 值改變時觸發(fā) | (value: string \| number) |
### Autocomplete Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | - |

InputNumber 計數(shù)器

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|----------|-------------- |----------|-------------------------------- |-------- |
| value / v-model | 綁定值 | number | — | 0 |
| min | 設(shè)置計數(shù)器允許的最小值 | number | — | -Infinity |
| max | 設(shè)置計數(shù)器允許的最大值 | number | — | Infinity |
| step | 計數(shù)器步長 | number | — | 1 |
| step-strictly | 是否只能輸入 step 的倍數(shù) | boolean | — | false |
| precision| 數(shù)值精度 | number | — | — |
| size | 計數(shù)器尺寸 | string | large, small | — |
| disabled | 是否禁用計數(shù)器 | boolean | — | false |
| controls | 是否使用控制按鈕 | boolean | — | true |
| controls-position | 控制按鈕位置 | string | right | - |
| name | 原生屬性 | string | — | — |
| label | 輸入框關(guān)聯(lián)的label文字 | string | — | — |
| placeholder | 輸入框默認(rèn) placeholder | string | - | - |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| change | 綁定值被改變時觸發(fā) | currentValue, oldValue |
| blur | 在組件 Input 失去焦點時觸發(fā) | (event: Event) |
| focus | 在組件 Input 獲得焦點時觸發(fā) | (event: Event) |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | - |
| select | 選中 input 中的文字 | — |

Select 選擇器

### Select Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | 綁定值 | boolean / string / number | — | — |
| multiple | 是否多選 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| value-key | 作為 value 唯一標(biāo)識的鍵名，綁定值為對象類型時必填 | string | — | value |
| size | 輸入框尺寸 | string | medium/small/mini | — |
| clearable | 是否可以清空選項 | boolean | — | false |
| collapse-tags | 多選時是否將選中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多選時用戶最多可以選擇的項目數(shù)，為 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 | 是否允許用戶創(chuàng)建新條目，需配合 `filterable` 使用 | boolean | — | false |
| filter-method | 自定義搜索方法 | function | — | — |
| remote | 是否為遠(yuǎn)程搜索 | boolean | — | false |
| remote-method | 遠(yuǎn)程搜索方法 | function | — | — |
| loading | 是否正在從遠(yuǎn)程獲取數(shù)據(jù) | boolean | — | false |
| loading-text | 遠(yuǎn)程加載時顯示的文字 | string | — | 加載中 |
| no-match-text | 搜索條件無匹配時顯示的文字，也可以使用`slot="empty"`設(shè)置 | string | — | 無匹配數(shù)據(jù) |
| no-data-text | 選項為空時顯示的文字，也可以使用`slot="empty"`設(shè)置 | string | — | 無數(shù)據(jù) |
| popper-class | Select 下拉框的類名 | string | — | — |
| reserve-keyword | 多選且可搜索時，是否在選中一個選項后保留當(dāng)前的搜索關(guān)鍵詞 | boolean | — | false |
| default-first-option | 在輸入框按下回車，選擇第一個匹配項。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
| popper-append-to-body | 是否將彈出框插入至 body 元素。在彈出框的定位出現(xiàn)問題時，可將該屬性設(shè)置為 false | boolean | - | true |
| automatic-dropdown | 對于不可搜索的 Select，是否在輸入框獲得焦點后自動彈出選項菜單 | boolean | - | false |
### Select Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|---------|---------|
| change | 選中值發(fā)生變化時觸發(fā) | 目前的選中值 |
| visible-change | 下拉框出現(xiàn)/隱藏時觸發(fā) | 出現(xiàn)則為 true，隱藏則為 false |
| remove-tag | 多選模式下移除tag時觸發(fā) | 移除的tag值 |
| clear | 可清空的單選模式下用戶點擊清空按鈕時觸發(fā) | — |
| blur | 當(dāng) input 失去焦點時觸發(fā) | (event: Event) |
| focus | 當(dāng) input 獲得焦點時觸發(fā) | (event: Event) |
### Select Slots
| name | 說明 |
|---------|---------|
| — | Option 組件列表 |
| prefix | Select 組件頭部內(nèi)容 |
| empty | 無選項時的列表 |
### Option Group Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 分組的組名 | string | — | — |
| disabled | 是否將該分組下所有選項置為禁用 | boolean | — | false |
### Option Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 選項的值 | string/number/object | — | — |
| label | 選項的標(biāo)簽，若不設(shè)置則默認(rèn)與 `value` 相同 | string/number | — | — |
| disabled | 是否禁用該選項 | boolean | — | false |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | - |
| blur | 使 input 失去焦點，并隱藏下拉框 | - |

Cascader 級聯(lián)選擇器

### Cascader Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 選中項綁定值 | - | — | — |
| options | 可選項數(shù)據(jù)源，鍵名可通過 `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 | 自定義搜索邏輯，第一個參數(shù)是節(jié)點`node`，第二個參數(shù)是搜索關(guān)鍵詞`keyword`，通過返回布爾值表示是否命中 | function(node, keyword) | - | - |
| debounce | 搜索關(guān)鍵詞輸入的去抖延遲，毫秒 | number | — | 300 |
| before-filter | 篩選之前的鉤子，參數(shù)為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選 | function(value) | — | — |
| popper-class | 自定義浮層類名 | string | — | — |
### Cascader Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 當(dāng)選中節(jié)點變化時觸發(fā) | 選中節(jié)點的值 |
| expand-change | 當(dāng)展開節(jié)點發(fā)生變化時觸發(fā) | 各父級選項值組成的數(shù)組 |
| blur | 當(dāng)失去焦點時觸發(fā) | (event: Event) |
| focus | 當(dāng)獲得焦點時觸發(fā) | (event: Event) |
| visible-change | 下拉框出現(xiàn)/隱藏時觸發(fā) | 出現(xiàn)則為 true，隱藏則為 false |
| remove-tag | 在多選模式下，移除Tag時觸發(fā) | 移除的Tag對應(yīng)的節(jié)點的值 |
### Cascader Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| getCheckedNodes | 獲取選中的節(jié)點 | (leafOnly) 是否只是葉子節(jié)點，默認(rèn)值為 `false` |
### Cascader Slots
| 名稱 | 說明 |
|---------|-------------|
| - | 自定義備選項的節(jié)點內(nèi)容，參數(shù)為 { node, data }，分別為當(dāng)前節(jié)點的 Node 對象和數(shù)據(jù) |
| empty | 無匹配選項時的內(nèi)容 |
### CascaderPanel Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 選中項綁定值 | - | — | — |
| options | 可選項數(shù)據(jù)源，鍵名可通過 `Props` 屬性配置 | array | — | — |
| props | 配置選項，具體見下表 | object | — | — |
### CascaderPanel Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 當(dāng)選中節(jié)點變化時觸發(fā) | 選中節(jié)點的值 |
| expand-change | 當(dāng)展開節(jié)點發(fā)生變化時觸發(fā) | 各父級選項值組成的數(shù)組 |
### CascaderPanel Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| getCheckedNodes | 獲取選中的節(jié)點數(shù)組 | (leafOnly) 是否只是葉子節(jié)點，默認(rèn)值為 `false` |
| clearCheckedNodes | 清空選中的節(jié)點 | - |
### CascaderPanel Slots
| 名稱 | 說明 |
|---------|-------------|
| - | 自定義備選項的節(jié)點內(nèi)容，參數(shù)為 { node, data }，分別為當(dāng)前節(jié)點的 Node 對象和數(shù)據(jù) |
### Props
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| -------- | ----------------- | ------ | ------ | ------ |
| expandTrigger | 次級菜單的展開方式 | string | click / hover | 'click' |
| multiple | 是否多選 | boolean | - | false |
| checkStrictly | 是否嚴(yán)格的遵守父子節(jié)點不互相關(guān)聯(lián) | boolean | - | false |
| emitPath | 在選中節(jié)點改變時，是否返回由該節(jié)點所在的各級菜單的值所組成的數(shù)組，若設(shè)置 false，則只返回該節(jié)點的值 | boolean | - | true |
| lazy | 是否動態(tài)加載子節(jié)點，需與 lazyLoad 方法結(jié)合使用 | boolean | - | false |
| lazyLoad | 加載動態(tài)數(shù)據(jù)的方法，僅在 lazy 為 true 時有效 | function(node, resolve)，`node`為當(dāng)前點擊的節(jié)點，`resolve`為數(shù)據(jù)加載完成的回調(diào)(必須調(diào)用) | - | - |
| value | 指定選項的值為選項對象的某個屬性值 | string | — | 'value' |
| label | 指定選項標(biāo)簽為選項對象的某個屬性值 | string | — | 'label' |
| children | 指定選項的子選項為選項對象的某個屬性值 | string | — | 'children' |
| disabled | 指定選項的禁用為選項對象的某個屬性值 | string | — | 'disabled' |
| leaf | 指定選項的葉子節(jié)點的標(biāo)志位為選項對象的某個屬性值 | string | — | 'leaf' |

Switch 開關(guān)

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 綁定值 | boolean / string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| width | switch 的寬度（像素） | number | — | 40 |
| active-icon-class | switch 打開時所顯示圖標(biāo)的類名，設(shè)置此項會忽略 `active-text` | string | — | — |
| inactive-icon-class | switch 關(guān)閉時所顯示圖標(biāo)的類名，設(shè)置此項會忽略 `inactive-text` | string | — | — |
| active-text | switch 打開時的文字描述 | string | — | — |
| inactive-text | switch 關(guān)閉時的文字描述 | string | — | — |
| active-value | switch 打開時的值 | boolean / string / number | — | true |
| inactive-value | switch 關(guān)閉時的值 | boolean / string / number | — | false |
| active-color | switch 打開時的背景色 | string | — | #409EFF |
| inactive-color | switch 關(guān)閉時的背景色 | string | — | #C0CCDA |
| name | switch 對應(yīng)的 name 屬性 | string | — | — |
| validate-event | 改變 switch 狀態(tài)時是否觸發(fā)表單的校驗 | boolean | - | true |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | switch 狀態(tài)發(fā)生變化時的回調(diào)函數(shù) | 新狀態(tài)的值 |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 Switch 獲取焦點 | - |

Slider 滑塊

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| 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 | 屏幕閱讀器標(biāo)簽 | string | — | — |
| debounce | 輸入時的去抖延遲，毫秒，僅在`show-input`等于true時有效 | number | — | 300 |
| tooltip-class | tooltip 的自定義類名 | string | — | — |
| marks | 標(biāo)記， key 的類型必須為 number 且取值在閉區(qū)間 `[min, max]` 內(nèi)，每個標(biāo)記可以單獨設(shè)置樣式 | object | — | — |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 值改變時觸發(fā)（使用鼠標(biāo)拖曳時，只在松開鼠標(biāo)后觸發(fā)） | 改變后的值 |
| input | 數(shù)據(jù)改變時觸發(fā)（使用鼠標(biāo)拖曳時，活動過程實時觸發(fā)） | 改變后的值 |

TimePicker 時間選擇器

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| 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 | 非范圍選擇時的占位內(nèi)容 | string | — | — |
| start-placeholder | 范圍選擇時開始日期的占位內(nèi)容 | string | — | — |
| end-placeholder | 范圍選擇時開始日期的占位內(nèi)容 | string | — | — |
| is-range | 是否為時間范圍選擇，僅對`<el-time-picker>`有效 | boolean | — | false |
| arrow-control | 是否使用箭頭進(jìn)行時間選擇，僅對`<el-time-picker>`有效 | boolean | — | false |
| align | 對齊方式 | string | left / center / right | left |
| popper-class | TimePicker 下拉框的類名 | string | — | — |
| picker-options | 當(dāng)前時間日期選擇器特有的選項參考下表 | object | — | {} |
| range-separator | 選擇范圍時的分隔符 | string | - | '-' |
| value-format | 可選，僅TimePicker時可用，綁定值的格式。不指定則綁定值為 Date 對象 | string | 見[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
| default-value | 可選，選擇器打開時默認(rèn)顯示的時間 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可選值(TimeSelect) | — |
| name | 原生屬性 | string | — | — |
| prefix-icon | 自定義頭部圖標(biāo)的類名 | string | — | el-icon-time |
| clear-icon | 自定義清空圖標(biāo)的類名 | string | — | el-icon-circle-close |
### Time Select Options
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | 開始時間 | string | — | 09:00 |
| end | 結(jié)束時間 | string | — | 18:00 |
| step | 間隔時間 | string | — | 00:30 |
| minTime | 最小時間，小于該時間的時間段將被禁用 | string | — | 00:00 |
| maxTime | 最大時間，大于該時間的時間段將被禁用 | string | — | — |
### Time Picker Options
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | 可選時間段，例如`'18:30:00 - 20:30:00'`或者傳入數(shù)組`['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
| 事件名 | 說明 | 參數(shù) |
|---------|--------|---------|
| change | 用戶確認(rèn)選定的值時觸發(fā) | 組件綁定值 |
| blur | 當(dāng) input 失去焦點時觸發(fā) | 組件實例 |
| focus | 當(dāng) input 獲得焦點時觸發(fā) | 組件實例 |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | - |

DatePicker 日期選擇器

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| 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 | 非范圍選擇時的占位內(nèi)容 | string | — | — |
| start-placeholder | 范圍選擇時開始日期的占位內(nèi)容 | string | — | — |
| end-placeholder | 范圍選擇時結(jié)束日期的占位內(nèi)容 | 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 | 當(dāng)前時間日期選擇器特有的選項參考下表 | object | — | {} |
| range-separator | 選擇范圍時的分隔符 | string | — | '-' |
| default-value | 可選，選擇器打開時默認(rèn)顯示的時間 | Date | 可被`new Date()`解析 | — |
| default-time | 范圍選擇時選中日期所使用的當(dāng)日內(nèi)具體時刻 | string[] | 數(shù)組，長度為 2，每項值為字符串，形如`12:00:00`，第一項指定開始日期的時刻，第二項指定結(jié)束日期的時刻，不指定會使用時刻 `00:00:00` | — |
| value-format | 可選，綁定值的格式。不指定則綁定值為 Date 對象 | string | 見[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
| name | 原生屬性 | string | — | — |
| unlink-panels | 在范圍選擇器里取消兩個日期面板之間的聯(lián)動 | boolean | — | false |
| prefix-icon | 自定義頭部圖標(biāo)的類名 | string | — | el-icon-date |
| clear-icon | 自定義清空圖標(biāo)的類名 | string | — | el-icon-circle-close |
| validate-event | 輸入時是否觸發(fā)表單的校驗 | boolean | - | true |
### Picker Options
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 設(shè)置快捷選項，需要傳入 { text, onClick } 對象用法參考 demo 或下表 | Object[] | — | — |
| disabledDate | 設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 設(shè)置日期的 className | Function(Date) | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 選中日期后會執(zhí)行的回調(diào)，只有當(dāng) `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
### Shortcuts
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | 標(biāo)題文本 | string | — | — |
| onClick | 選中后的回調(diào)函數(shù)，參數(shù)是 vm，可通過觸發(fā) 'pick' 事件設(shè)置選擇器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| change | 用戶確認(rèn)選定的值時觸發(fā) | 組件綁定值。格式與綁定值一致，可受 `value-format` 控制 |
| blur | 當(dāng) input 失去焦點時觸發(fā) | 組件實例 |
| focus | 當(dāng) input 獲得焦點時觸發(fā) | 組件實例 |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | — |

DateTimePicker 日期時間選擇器

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| 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 | 非范圍選擇時的占位內(nèi)容 | string | — | — |
| start-placeholder | 范圍選擇時開始日期的占位內(nèi)容 | string | — | — |
| end-placeholder | 范圍選擇時結(jié)束日期的占位內(nèi)容 | string | — | — |
| time-arrow-control | 是否使用箭頭進(jìn)行時間選擇 | 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 | 當(dāng)前時間日期選擇器特有的選項參考下表 | object | — | {} |
| range-separator | 選擇范圍時的分隔符 | string | - | '-' |
| default-value | 可選，選擇器打開時默認(rèn)顯示的時間 | Date | 可被`new Date()`解析 | — |
| default-time | 選中日期后的默認(rèn)具體時刻 | 非范圍選擇時：string / 范圍選擇時：string[] | 非范圍選擇時：形如`12:00:00`的字符串；范圍選擇時：數(shù)組，長度為 2，每項值為字符串，形如`12:00:00`，第一項指定開始日期的時刻，第二項指定結(jié)束日期的時刻。不指定會使用時刻 `00:00:00` | — |
| value-format | 可選，綁定值的格式。不指定則綁定值為 Date 對象 | string | 見[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
| name | 原生屬性 | string | — | — |
| unlink-panels | 在范圍選擇器里取消兩個日期面板之間的聯(lián)動 | boolean | — | false |
| prefix-icon | 自定義頭部圖標(biāo)的類名 | string | — | el-icon-date |
| clear-icon | 自定義清空圖標(biāo)的類名 | string | — | el-icon-circle-close |
### Picker Options
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 設(shè)置快捷選項，需要傳入 { text, onClick } 對象用法參考 demo 或下表 | Object[] | — | — |
| disabledDate | 設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 設(shè)置日期的 className | Function(Date) | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
### Shortcuts
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | 標(biāo)題文本 | string | — | — |
| onClick | 選中后的回調(diào)函數(shù)，參數(shù)是 vm，可通過觸發(fā) 'pick' 事件設(shè)置選擇器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | 用戶確認(rèn)選定的值時觸發(fā) | 組件綁定值。格式與綁定值一致，可受 `value-format` 控制 |
| blur | 當(dāng) input 失去焦點時觸發(fā) | 組件實例 |
| focus | 當(dāng) input 獲得焦點時觸發(fā) | 組件實例 |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| focus | 使 input 獲取焦點 | — |
### Slots
| Name | 說明 |
|---------|-------------|
| range-separator | 自定義分隔符 |

Upload 上傳

### Attribute
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必選參數(shù)，上傳的地址 | string | — | — |
| headers | 設(shè)置上傳的請求頭部 | object | — | — |
| multiple | 是否支持多選文件 | boolean | — | — |
| data | 上傳時附帶的額外參數(shù) | object | — | — |
| name | 上傳的文件字段名 | string | — | file |
| with-credentials | 支持發(fā)送 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 模式下此參數(shù)無效）| 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 | 文件狀態(tài)改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調(diào)用 | function(file, fileList) | — | — |
| before-upload | 上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。 | function(file) | — | — |
| before-remove | 刪除文件之前的鉤子，參數(shù)為上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除。| function(file, fileList) | — | — |
| list-type | 文件列表的類型 | string | text/picture/picture-card | text |
| auto-upload | 是否在選取文件后立即進(jìn)行上傳 | boolean | — | true |
| file-list | 上傳的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
| http-request | 覆蓋默認(rèn)的上傳行為，可以自定義上傳的實現(xiàn) | function | — | — |
| disabled | 是否禁用 | boolean | — | false |
| limit | 最大允許上傳個數(shù) | number | — | — |
| on-exceed | 文件超出個數(shù)限制時的鉤子 | function(files, fileList) | — | - |
### Slot
| name | 說明 |
|------|--------|
| trigger | 觸發(fā)文件選擇框的內(nèi)容 |
| tip | 提示說明文字 |
### Methods
| 方法名 | 說明 | 參數(shù) |
|----------- |-------------- | -- |
| clearFiles | 清空已上傳的文件列表（該方法不支持在 before-upload 中調(diào)用） | — |
| abort | 取消上傳請求 | （ file: fileList 中的 file 對象 ） |
| submit | 手動上傳文件列表 | — |

Rate 評分

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 綁定值 | number | — | 0 |
| max | 最大分值 | number | — | 5 |
| disabled | 是否為只讀 | boolean | — | false |
| allow-half | 是否允許半選 | boolean | — | false |
| low-threshold | 低分和中等分?jǐn)?shù)的界限值，值本身被劃分在低分中 | number | — | 2 |
| high-threshold | 高分和中等分?jǐn)?shù)的界限值，值本身被劃分在高分中 | number | — | 4 |
| colors | icon 的顏色。若傳入數(shù)組，共有 3 個元素，為 3 個分段所對應(yīng)的顏色；若傳入對象，可自定義分段，鍵名為分段的界限值，鍵值為對應(yīng)的顏色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | 未選中 icon 的顏色 | string | — | #C6D1DE |
| disabled-void-color | 只讀時未選中 icon 的顏色 | string | — | #EFF2F7 |
| icon-classes | icon 的類名。若傳入數(shù)組，共有 3 個元素，為 3 個分段所對應(yīng)的類名；若傳入對象，可自定義分段，鍵名為分段的界限值，鍵值為對應(yīng)的類名 | 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 數(shù)組中選取當(dāng)前分?jǐn)?shù)對應(yīng)的文字內(nèi)容 | boolean | — | false |
| show-score | 是否顯示當(dāng)前分?jǐn)?shù)，show-score 和 show-text 不能同時為真 | boolean | — | false |
| text-color | 輔助文字的顏色 | string | — | #1F2D3D |
| texts | 輔助文字?jǐn)?shù)組 | array | — | ['極差', '失望', '一般', '滿意', '驚喜'] |
| score-template | 分?jǐn)?shù)顯示模板 | string | — | {value} |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 分值改變時觸發(fā) | 改變后的分值 |

ColorPicker 顏色選擇器

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| 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 | 預(yù)定義顏色 | array | — | — |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 當(dāng)綁定值變化時觸發(fā) | 當(dāng)前值 |
| active-change | 面板中當(dāng)前顯示的顏色發(fā)生改變時觸發(fā) | 當(dāng)前顯示的顏色值 |

Transfer 穿梭框

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 綁定值 | array | — | — |
| data | Transfer 的數(shù)據(jù)源 | array[{ key, label, disabled }] | — | [ ] |
| filterable | 是否可搜索 | boolean | — | false |
| filter-placeholder | 搜索框占位符 | string | — | 請輸入搜索內(nèi)容 |
| filter-method | 自定義搜索方法 | function | — | — |
| target-order | 右側(cè)列表元素的排序策略：若為 `original`，則保持與數(shù)據(jù)源相同的順序；若為 `push`，則新加入的元素排在最后；若為 `unshift`，則新加入的元素排在最前 | string | original / push / unshift | original |
| titles | 自定義列表標(biāo)題 | array | — | ['列表 1', '列表 2'] |
| button-texts | 自定義按鈕文案 | array | — | [ ] |
| render-content | 自定義數(shù)據(jù)項渲染函數(shù) | function(h, option) | — | — |
| format | 列表頂部勾選狀態(tài)文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | 數(shù)據(jù)源的字段別名 | object{key, label, disabled} | — | — |
| left-default-checked | 初始狀態(tài)下左側(cè)列表的已勾選項的 key 數(shù)組 | array | — | [ ] |
| right-default-checked | 初始狀態(tài)下右側(cè)列表的已勾選項的 key 數(shù)組 | array | — | [ ] |
### Slot
| name | 說明 |
|------|--------|
| left-footer | 左側(cè)列表底部的內(nèi)容 |
| right-footer | 右側(cè)列表底部的內(nèi)容 |
### Scoped Slot
| name | 說明 |
|------|--------|
| — | 自定義數(shù)據(jù)項的內(nèi)容，參數(shù)為 { option } |
### Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| clearQuery | 清空某個面板的搜索關(guān)鍵詞 | 'left' / 'right'，指定需要清空的面板 |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| change | 右側(cè)列表元素變化時觸發(fā) | 當(dāng)前值、數(shù)據(jù)移動的方向（'left' / 'right'）、發(fā)生移動的數(shù)據(jù) key 數(shù)組 |
| left-check-change | 左側(cè)列表元素被用戶選中 / 取消選中時觸發(fā) | 當(dāng)前被選中的元素的 key 數(shù)組、選中狀態(tài)發(fā)生變化的元素的 key 數(shù)組 |
| right-check-change | 右側(cè)列表元素被用戶選中 / 取消選中時觸發(fā) | 當(dāng)前被選中的元素的 key 數(shù)組、選中狀態(tài)發(fā)生變化的元素的 key 數(shù)組 |

Form 表單

### Form Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表單數(shù)據(jù)對象 | object | — | — |
| rules | 表單驗證規(guī)則 | object | — | — |
| inline | 行內(nèi)表單模式 | boolean | — | false |
| label-position | 表單域標(biāo)簽的位置，如果值為 left 或者 right 時，則需要設(shè)置 `label-width` | string | right/left/top | right |
| label-width | 表單域標(biāo)簽的寬度，例如 '50px'。作為 Form 直接子元素的 form-item 會繼承該值。支持 `auto`。 | string | — | — |
| label-suffix | 表單域標(biāo)簽的后綴 | string | — | — |
| hide-required-asterisk | 是否顯示必填字段的標(biāo)簽旁邊的紅色星號 | boolean | — | false |
| show-message | 是否顯示校驗錯誤信息 | boolean | — | true |
| inline-message | 是否以行內(nèi)形式展示校驗信息 | boolean | — | false |
| status-icon | 是否在輸入框中顯示校驗結(jié)果反饋圖標(biāo) | boolean | — | false |
| validate-on-rule-change | 是否在 `rules` 屬性改變后立即觸發(fā)一次驗證 | boolean | — | true |
| size | 用于控制該表單內(nèi)組件的尺寸 | string | medium / small / mini | — |
| disabled | 是否禁用該表單內(nèi)的所有組件。若設(shè)置為 true，則表單內(nèi)組件上的 disabled 屬性不再生效 | boolean | — | false |
### Form Methods
| 方法名 | 說明 | 參數(shù)
|---------- |-------------- | --------------
| validate | 對整個表單進(jìn)行校驗的方法，參數(shù)為一個回調(diào)函數(shù)。該回調(diào)函數(shù)會在校驗結(jié)束后被調(diào)用，并傳入兩個參數(shù)：是否校驗成功和未通過校驗的字段。若不傳入回調(diào)函數(shù)，則會返回一個 promise | Function(callback: Function(boolean, object))
| validateField | 對部分表單字段進(jìn)行校驗的方法 | Function(props: array \| string, callback: Function(errorMessage: string))
| resetFields | 對整個表單進(jìn)行重置，將所有字段值重置為初始值并移除校驗結(jié)果 | —
| clearValidate | 移除表單項的校驗結(jié)果。傳入待移除的表單項的 prop 屬性或者 prop 組成的數(shù)組，如不傳則移除整個表單的校驗結(jié)果 | Function(props: array \| string)
### Form Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|--------- |-------- |---------- |
| validate | 任一表單項被校驗后觸發(fā) | 被校驗的表單項 prop 值，校驗是否通過，錯誤消息（如果存在） |
### Form-Item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| prop | 表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的 | string | 傳入 Form 組件的 `model` 中的字段 | — |
| label | 標(biāo)簽文本 | string | — | — |
| label-width | 表單域標(biāo)簽的的寬度，例如 '50px'。支持 `auto`。 | string | — | — |
| required | 是否必填，如不設(shè)置，則會根據(jù)校驗規(guī)則自動生成 | boolean | — | false |
| rules | 表單驗證規(guī)則 | object | — | — |
| error | 表單域驗證錯誤信息, 設(shè)置該值會使表單驗證狀態(tài)變?yōu)閌error`，并顯示該錯誤信息 | string | — | — |
| show-message | 是否顯示校驗錯誤信息 | boolean | — | true |
| inline-message | 以行內(nèi)形式展示校驗信息 | boolean | — | false |
| size | 用于控制該表單域下組件的尺寸 | string | medium / small / mini | - |
### Form-Item Slot
| name | 說明 |
|------|--------|
| — | Form Item 的內(nèi)容 |
| label | 標(biāo)簽文本的內(nèi)容 |
### Form-Item Scoped Slot
| name | 說明 |
|--------|--------|
| error | 自定義表單校驗信息的顯示方式，參數(shù)為 { error } |
### Form-Item Methods
| 方法名 | 說明 | 參數(shù)
|---------- |-------------- | --------------
| resetField | 對該表單項進(jìn)行重置，將其值重置為初始值并移除校驗結(jié)果 | -
| clearValidate | 移除該表單項的校驗結(jié)果 | -

三.data 數(shù)據(jù)

Table 表格

### Table Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 顯示的數(shù)據(jù) | array | — | — |
| height | Table 的高度，默認(rèn)為自動高度。如果 height 為 number 類型，單位 px；如果 height 為 string 類型，則這個高度會設(shè)置為 Table 的 style.height 的值，Table 的高度會受控于外部樣式。 | string/number | — | — |
| max-height | Table 的最大高度。合法的值為數(shù)字或者單位為 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 | 是否要高亮當(dāng)前行 | boolean | — | false |
| current-row-key | 當(dāng)前行的 key，只寫屬性 | String,Number | — | — |
| row-class-name | 行的 className 的回調(diào)方法，也可以使用字符串為所有行設(shè)置一個固定的 className。 | Function({row, rowIndex})/String | — | — |
| row-style | 行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有行設(shè)置一樣的 Style。 | Function({row, rowIndex})/Object | — | — |
| cell-class-name | 單元格的 className 的回調(diào)方法，也可以使用字符串為所有單元格設(shè)置一個固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| cell-style | 單元格的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有單元格設(shè)置一樣的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| header-row-class-name | 表頭行的 className 的回調(diào)方法，也可以使用字符串為所有表頭行設(shè)置一個固定的 className。 | Function({row, rowIndex})/String | — | — |
| header-row-style | 表頭行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有表頭行設(shè)置一樣的 Style。 | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | 表頭單元格的 className 的回調(diào)方法，也可以使用字符串為所有表頭單元格設(shè)置一個固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| header-cell-style | 表頭單元格的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有表頭單元格設(shè)置一樣的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| row-key | 行數(shù)據(jù)的 Key，用來優(yōu)化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形數(shù)據(jù)時，該屬性是必填的。類型為 String 時，支持多層訪問：`user.info.id`，但不支持 `user.info[0].id`，此種情況請使用 `Function`。 | Function(row)/String | — | — |
| empty-text | 空數(shù)據(jù)時顯示的文本內(nèi)容，也可以通過 `slot="empty"` 設(shè)置 | String | — | 暫無數(shù)據(jù) |
| default-expand-all | 是否默認(rèn)展開所有行，當(dāng) Table 包含展開行存在或者為樹形表格時有效 | Boolean | — | false |
| expand-row-keys | 可以通過該屬性設(shè)置 Table 目前的展開行，需要設(shè)置 row-key 屬性才能使用，該屬性為展開行的 keys 數(shù)組。| Array | — | |
| default-sort | 默認(rèn)的排序列的 prop 和順序。它的`prop`屬性指定默認(rèn)的排序的列，`order`指定默認(rèn)排序的順序| Object | `order`: ascending, descending | 如果只指定了`prop`, 沒有指定`order`, 則默認(rèn)順序是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 | 在多選表格中，當(dāng)僅有部分行被選中時，點擊表頭的多選框時的行為。若為 true，則選中所有行；若為 false，則取消選擇所有行 | Boolean | — | true |
| indent | 展示樹形數(shù)據(jù)時，樹節(jié)點的縮進(jìn) | Number | — | 16 |
| lazy | 是否懶加載子節(jié)點數(shù)據(jù) | Boolean | — | — |
| load | 加載子節(jié)點數(shù)據(jù)的函數(shù)，lazy 為 true 時生效，函數(shù)第二個參數(shù)包含了節(jié)點的層級信息 | Function(row, treeNode, resolve) | — | — |
| tree-props | 渲染嵌套數(shù)據(jù)的配置選項 | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
### Table Events
| 事件名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| select | 當(dāng)用戶手動勾選數(shù)據(jù)行的 Checkbox 時觸發(fā)的事件 | selection, row |
| select-all | 當(dāng)用戶手動勾選全選 Checkbox 時觸發(fā)的事件 | selection |
| selection-change | 當(dāng)選擇項發(fā)生變化時會觸發(fā)該事件 | selection |
| cell-mouse-enter | 當(dāng)單元格 hover 進(jìn)入時會觸發(fā)該事件 | row, column, cell, event |
| cell-mouse-leave | 當(dāng)單元格 hover 退出時會觸發(fā)該事件 | row, column, cell, event |
| cell-click | 當(dāng)某個單元格被點擊時會觸發(fā)該事件 | row, column, cell, event |
| cell-dblclick | 當(dāng)某個單元格被雙擊擊時會觸發(fā)該事件 | row, column, cell, event |
| row-click | 當(dāng)某一行被點擊時會觸發(fā)該事件 | row, column, event |
| row-contextmenu | 當(dāng)某一行被鼠標(biāo)右鍵點擊時會觸發(fā)該事件 | row, column, event |
| row-dblclick | 當(dāng)某一行被雙擊時會觸發(fā)該事件 | row, column, event |
| header-click | 當(dāng)某一列的表頭被點擊時會觸發(fā)該事件 | column, event |
| header-contextmenu | 當(dāng)某一列的表頭被鼠標(biāo)右鍵點擊時觸發(fā)該事件 | column, event |
| sort-change | 當(dāng)表格的排序條件發(fā)生變化的時候會觸發(fā)該事件 | { column, prop, order } |
| filter-change | 當(dāng)表格的篩選條件發(fā)生變化的時候會觸發(fā)該事件，參數(shù)的值是一個對象，對象的 key 是 column 的 columnKey，對應(yīng)的 value 為用戶選擇的篩選條件的數(shù)組。 | filters |
| current-change | 當(dāng)表格的當(dāng)前行發(fā)生變化的時候會觸發(fā)該事件，如果要高亮當(dāng)前行，請打開表格的 highlight-current-row 屬性 | currentRow, oldCurrentRow |
| header-dragend | 當(dāng)拖動表頭改變了列的寬度的時候會觸發(fā)該事件 | newWidth, oldWidth, column, event |
| expand-change | 當(dāng)用戶對某一行展開或者關(guān)閉的時候會觸發(fā)該事件（展開行時，回調(diào)的第二個參數(shù)為 expandedRows；樹形表格時第二參數(shù)為 expanded） | row, (expandedRows \| expanded) |
### Table Methods
| 方法名 | 說明 | 參數(shù) |
| ---- | ---- | ---- |
| clearSelection | 用于多選表格，清空用戶的選擇 | — |
| toggleRowSelection | 用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個參數(shù)，則是設(shè)置這一行選中與否（selected 為 true 則選中） | row, selected |
| toggleAllSelection | 用于多選表格，切換所有行的選中狀態(tài) | - |
| toggleRowExpansion | 用于可展開表格與樹形表格，切換某一行的展開狀態(tài)，如果使用了第二個參數(shù)，則是設(shè)置這一行展開與否（expanded 為 true 則展開） | row, expanded |
| setCurrentRow | 用于單選表格，設(shè)定某一行為選中行，如果調(diào)用時不加參數(shù)，則會取消目前高亮行的選中狀態(tài)。 | row |
| clearSort | 用于清空排序條件，數(shù)據(jù)會恢復(fù)成未排序的狀態(tài) | — |
| clearFilter | 不傳入?yún)?shù)時用于清空所有過濾條件，數(shù)據(jù)會恢復(fù)成未過濾的狀態(tài)，也可傳入由columnKey組成的數(shù)組以清除指定列的過濾條件 | columnKey |
| doLayout | 對 Table 進(jìn)行重新布局。當(dāng) Table 或其祖先元素由隱藏切換為顯示時，可能需要調(diào)用此方法 | — |
| sort | 手動對 Table 進(jìn)行排序。參數(shù)`prop`屬性指定排序列，`order`指定排序順序。 | prop: string, order: string |
### Table Slot
| name | 說明 |
|------|--------|
| append | 插入至表格最后一行之后的內(nèi)容，如果需要對表格的內(nèi)容進(jìn)行無限滾動操作，可能需要用到這個 slot。若表格有合計行，該 slot 會位于合計行之上。 |
### Table-column Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 對應(yīng)列的類型。如果設(shè)置了 `selection` 則顯示多選框；如果設(shè)置了 `index` 則顯示該行的索引（從 1 開始計算）；如果設(shè)置了 `expand` 則顯示為一個可展開的按鈕 | string | selection/index/expand | — |
| index | 如果設(shè)置了 `type=index`，可以通過傳遞 `index` 屬性來自定義索引 | number, Function(index) | - | - |
| column-key | column 的 key，如果需要使用 filter-change 事件，則需要此屬性標(biāo)識是哪個 column 的篩選條件 | string | — | — |
| label | 顯示的標(biāo)題 | string | — | — |
| prop | 對應(yīng)列內(nèi)容的字段名，也可以使用 property 屬性 | string | — | — |
| width | 對應(yīng)列的寬度 | string | — | — |
| min-width | 對應(yīng)列的最小寬度，與 width 的區(qū)別是 width 是固定的，min-width 會把剩余寬度按比例分配給設(shè)置了 min-width 的列 | string | — | — |
| fixed | 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè) | string, boolean | true, left, right | — |
| render-header | 列標(biāo)題 Label 區(qū)域渲染使用的 Function | Function(h, { column, $index }) | — | — |
| sortable | 對應(yīng)列是否可以排序，如果設(shè)置為 'custom'，則代表用戶希望遠(yuǎn)程排序，需要監(jiān)聽 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
| sort-method | 對數(shù)據(jù)進(jìn)行排序的時候使用的方法，僅當(dāng) sortable 設(shè)置為 true 的時候有效，需返回一個數(shù)字，和 Array.sort 表現(xiàn)一致 | Function(a, b) | — | — |
| sort-by | 指定數(shù)據(jù)按照哪個屬性進(jìn)行排序，僅當(dāng) sortable 設(shè)置為 true 且沒有設(shè)置 sort-method 的時候有效。如果 sort-by 為數(shù)組，則先按照第 1 個屬性排序，如果第 1 個相等，再按照第 2 個排序，以此類推 | String/Array/Function(row, index) | — | — |
| sort-orders | 數(shù)據(jù)在排序時所使用排序策略的輪轉(zhuǎn)順序，僅當(dāng) sortable 為 true 時有效。需傳入一個數(shù)組，隨著用戶點擊表頭，該列依次按照數(shù)組中元素的順序進(jìn)行排序 | array | 數(shù)組中的元素需為以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示還原為原始順序 | ['ascending', 'descending', null] |
| resizable | 對應(yīng)列是否可以通過拖動改變寬度（需要在 el-table 上設(shè)置 border 屬性為真） | boolean | — | true |
| formatter | 用來格式化內(nèi)容 | Function(row, column, cellValue, index) | — | — |
| show-overflow-tooltip | 當(dāng)內(nèi)容過長被隱藏時顯示 tooltip | Boolean | — | false |
| align | 對齊方式 | String | left/center/right | left |
| header-align | 表頭對齊方式，若不設(shè)置該項，則使用表格的對齊方式 | String | left/center/right | — |
| class-name | 列的 className | string | — | — |
| label-class-name | 當(dāng)前列標(biāo)題的自定義類名 | string | — | — |
| selectable | 僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選 | Function(row, index) | — | — |
| reserve-selection | 僅對 type=selection 的列有效，類型為 Boolean，為 true 則會在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 `row-key`） | Boolean | — | false |
| filters | 數(shù)據(jù)過濾的選項，數(shù)組格式，數(shù)組中的元素需要有 text 和 value 屬性。 | Array[{ text, value }] | — | — |
| filter-placement | 過濾彈出框的定位 | String | 與 Tooltip 的 `placement` 屬性相同 | — |
| filter-multiple | 數(shù)據(jù)過濾的選項是否多選 | Boolean | — | true |
| filter-method | 數(shù)據(jù)過濾使用的方法，如果是多選的篩選項，對每一條數(shù)據(jù)會執(zhí)行多次，任意一次返回 true 就會顯示。 | Function(value, row, column) | — | — |
| filtered-value | 選中的數(shù)據(jù)過濾項，如果需要自定義表頭過濾的渲染方式，可能會需要此屬性。 | Array | — | — |
### Table-column Scoped Slot
| name | 說明 |
|------|--------|
| — | 自定義列的內(nèi)容，參數(shù)為 { row, column, $index } |
| header | 自定義表頭的內(nèi)容. 參數(shù)為 { column, $index } |

Tag 標(biāo)簽

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 類型 | string | success/info/warning/danger | — |
| closable | 是否可關(guān)閉 | boolean | — | false |
| disable-transitions | 是否禁用漸變動畫 | boolean | — | false |
| hit | 是否有邊框描邊 | boolean | — | false |
| color | 背景色 | string | — | — |
| size | 尺寸 | string | medium / small / mini | — |
| effect | 主題 | string | dark / light / plain | light |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| click | 點擊 Tag 時觸發(fā)的事件 | — |
| close | 關(guān)閉 Tag 時觸發(fā)的事件 | — |

Progress 進(jìn)度條

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 進(jìn)度條類型 | string | line/circle/dashboard | line |
| stroke-width | 進(jìn)度條的寬度，單位 px | number | — | 6 |
| text-inside | 進(jìn)度條顯示文字內(nèi)置在進(jìn)度條內(nèi)（只在 type=line 時可用） | boolean | — | false |
| status | 進(jìn)度條當(dāng)前狀態(tài) | string | success/exception/warning | — |
| color | 進(jìn)度條背景色（會覆蓋 status 狀態(tài)顏色） | string/function/array | — | '' |
| width | 環(huán)形進(jìn)度條畫布寬度（只在 type 為 circle 或 dashboard 時可用） | number | | 126 |
| show-text | 是否顯示進(jìn)度條文字內(nèi)容 | boolean | — | true |
| stroke-linecap | circle/dashboard 類型路徑兩端的形狀 | string | butt/round/square | round |

Tree 樹形控件

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- |
| data | 展示數(shù)據(jù) | array | — | — |
| empty-text | 內(nèi)容為空的時候展示的文本 | String | — | — |
| node-key | 每個樹節(jié)點用來作為唯一標(biāo)識的屬性，整棵樹應(yīng)該是唯一的 | String | — | — |
| props | 配置選項，具體看下表 | object | — | — |
| render-after-expand | 是否在第一次展開某個樹節(jié)點后才渲染其子節(jié)點 | boolean | — | true |
| load | 加載子樹數(shù)據(jù)的方法，僅當(dāng) lazy 屬性為true 時生效 | function(node, resolve) | — | — |
| render-content | 樹節(jié)點的內(nèi)容區(qū)的渲染 Function | Function(h, { node, data, store } | — | — |
| highlight-current | 是否高亮當(dāng)前選中節(jié)點，默認(rèn)值是 false。 | boolean | — | false |
| default-expand-all | 是否默認(rèn)展開所有節(jié)點 | boolean | — | false |
| expand-on-click-node | 是否在點擊節(jié)點的時候展開或者收縮節(jié)點， 默認(rèn)值為 true，如果為 false，則只有點箭頭圖標(biāo)的時候才會展開或者收縮節(jié)點。 | boolean | — | true |
| check-on-click-node | 是否在點擊節(jié)點的時候選中節(jié)點，默認(rèn)值為 false，即只有在點擊復(fù)選框時才會選中節(jié)點。 | boolean | — | false |
| auto-expand-parent | 展開子節(jié)點的時候是否自動展開父節(jié)點 | boolean | — | true |
| default-expanded-keys | 默認(rèn)展開的節(jié)點的 key 的數(shù)組 | array | — | — |
| show-checkbox | 節(jié)點是否可被選擇 | boolean | — | false |
| check-strictly | 在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false | boolean | — | false |
| default-checked-keys | 默認(rèn)勾選的節(jié)點的 key 的數(shù)組 | array | — | — |
| current-node-key | 當(dāng)前選中的節(jié)點 | string, number | — | — |
| filter-node-method | 對樹節(jié)點進(jìn)行篩選時執(zhí)行的方法，返回 true 表示這個節(jié)點可以顯示，返回 false 則表示這個節(jié)點會被隱藏 | Function(value, data, node) | — | — |
| accordion | 是否每次只打開一個同級樹節(jié)點展開 | boolean | — | false |
| indent | 相鄰級節(jié)點間的水平縮進(jìn)，單位為像素 | number | — | 16 |
| icon-class | 自定義樹節(jié)點的圖標(biāo) | string | - | - |
| lazy | 是否懶加載子節(jié)點，需與 load 方法結(jié)合使用 | boolean | — | false |
| draggable | 是否開啟拖拽節(jié)點功能 | boolean | — | false |
| allow-drag | 判斷節(jié)點能否被拖拽 | Function(node) | — | — |
| allow-drop | 拖拽時判定目標(biāo)節(jié)點能否被放置。`type` 參數(shù)有三種情況：'prev'、'inner' 和 'next'，分別表示放置在目標(biāo)節(jié)點前、插入至目標(biāo)節(jié)點和放置在目標(biāo)節(jié)點后 | Function(draggingNode, dropNode, type) | — | — |
### props
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| -------- | ----------------- | ------ | ---- | ---- |
| label | 指定節(jié)點標(biāo)簽為節(jié)點對象的某個屬性值 | string, function(data, node) | — | — |
| children | 指定子樹為節(jié)點對象的某個屬性值 | string | — | — |
| disabled | 指定節(jié)點選擇框是否禁用為節(jié)點對象的某個屬性值 | boolean, function(data, node) | — | — |
| isLeaf | 指定節(jié)點是否為葉子節(jié)點，僅在指定了 lazy 屬性的情況下生效 | boolean, function(data, node) | — | — |
### 方法
`Tree` 內(nèi)部使用了 Node 類型的對象來包裝用戶傳入的數(shù)據(jù)，用來保存目前節(jié)點的狀態(tài)。
`Tree` 擁有如下方法：
| 方法名 | 說明 | 參數(shù) |
| --------------- | ---------------------------------------- | ---------------------------------------- |
| filter | 對樹節(jié)點進(jìn)行篩選操作 | 接收一個任意類型的參數(shù)，該參數(shù)會在 filter-node-method 中作為第一個參數(shù) |
| updateKeyChildren | 通過 keys 設(shè)置節(jié)點子元素，使用此方法必須設(shè)置 node-key 屬性 | (key, data) 接收兩個參數(shù)，1. 節(jié)點 key 2. 節(jié)點數(shù)據(jù)的數(shù)組 |
| getCheckedNodes | 若節(jié)點可被選擇（即 `show-checkbox` 為 `true`），則返回目前被選中的節(jié)點所組成的數(shù)組 | (leafOnly, includeHalfChecked) 接收兩個 boolean 類型的參數(shù)，1. 是否只是葉子節(jié)點，默認(rèn)值為 `false` 2. 是否包含半選節(jié)點，默認(rèn)值為 `false` |
| setCheckedNodes | 設(shè)置目前勾選的節(jié)點，使用此方法必須設(shè)置 node-key 屬性 | (nodes) 接收勾選節(jié)點數(shù)據(jù)的數(shù)組 |
| getCheckedKeys | 若節(jié)點可被選擇（即 `show-checkbox` 為 `true`），則返回目前被選中的節(jié)點的 key 所組成的數(shù)組 | (leafOnly) 接收一個 boolean 類型的參數(shù)，若為 `true` 則僅返回被選中的葉子節(jié)點的 keys，默認(rèn)值為 `false` |
| setCheckedKeys | 通過 keys 設(shè)置目前勾選的節(jié)點，使用此方法必須設(shè)置 node-key 屬性 | (keys, leafOnly) 接收兩個參數(shù)，1. 勾選節(jié)點的 key 的數(shù)組 2. boolean 類型的參數(shù)，若為 `true` 則僅設(shè)置葉子節(jié)點的選中狀態(tài)，默認(rèn)值為 `false` |
| setChecked | 通過 key / data 設(shè)置某個節(jié)點的勾選狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (key/data, checked, deep) 接收三個參數(shù)，1. 勾選節(jié)點的 key 或者 data 2. boolean 類型，節(jié)點是否選中 3. boolean 類型，是否設(shè)置子節(jié)點 ，默認(rèn)為 false |
| getHalfCheckedNodes | 若節(jié)點可被選擇（即 `show-checkbox` 為 `true`），則返回目前半選中的節(jié)點所組成的數(shù)組 | - |
| getHalfCheckedKeys | 若節(jié)點可被選擇（即 `show-checkbox` 為 `true`），則返回目前半選中的節(jié)點的 key 所組成的數(shù)組 | - |
| getCurrentKey | 獲取當(dāng)前被選中節(jié)點的 key，使用此方法必須設(shè)置 node-key 屬性，若沒有節(jié)點被選中則返回 null | — |
| getCurrentNode | 獲取當(dāng)前被選中節(jié)點的 data，若沒有節(jié)點被選中則返回 null | — |
| setCurrentKey | 通過 key 設(shè)置某個節(jié)點的當(dāng)前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (key) 待被選節(jié)點的 key，若為 null 則取消當(dāng)前高亮的節(jié)點 |
| setCurrentNode | 通過 node 設(shè)置某個節(jié)點的當(dāng)前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (node) 待被選節(jié)點的 node |
| getNode | 根據(jù) data 或者 key 拿到 Tree 組件中的 node | (data) 要獲得 node 的 key 或者 data |
| remove | 刪除 Tree 中的一個節(jié)點，使用此方法必須設(shè)置 node-key 屬性 | (data) 要刪除的節(jié)點的 data 或者 node |
| append | 為 Tree 中的一個節(jié)點追加一個子節(jié)點 | (data, parentNode) 接收兩個參數(shù)，1. 要追加的子節(jié)點的 data 2. 子節(jié)點的 parent 的 data、key 或者 node |
| insertBefore | 為 Tree 的一個節(jié)點的前面增加一個節(jié)點 | (data, refNode) 接收兩個參數(shù)，1. 要增加的節(jié)點的 data 2. 要增加的節(jié)點的后一個節(jié)點的 data、key 或者 node |
| insertAfter | 為 Tree 的一個節(jié)點的后面增加一個節(jié)點 | (data, refNode) 接收兩個參數(shù)，1. 要增加的節(jié)點的 data 2. 要增加的節(jié)點的前一個節(jié)點的 data、key 或者 node |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
| -------------- | -------------- | ---------------------------------------- |
| node-click | 節(jié)點被點擊時的回調(diào) | 共三個參數(shù)，依次為：傳遞給 `data` 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身。 |
| node-contextmenu | 當(dāng)某一節(jié)點被鼠標(biāo)右鍵點擊時會觸發(fā)該事件 | 共四個參數(shù)，依次為：event、傳遞給 `data` 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身。 |
| check-change | 節(jié)點選中狀態(tài)發(fā)生變化時的回調(diào) | 共三個參數(shù)，依次為：傳遞給 `data` 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點本身是否被選中、節(jié)點的子樹中是否有被選中的節(jié)點 |
| check | 當(dāng)復(fù)選框被點擊的時候觸發(fā) | 共兩個參數(shù)，依次為：傳遞給 `data` 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、樹目前的選中狀態(tài)對象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個屬性 |
| current-change | 當(dāng)前選中節(jié)點變化時觸發(fā)的事件 | 共兩個參數(shù)，依次為：當(dāng)前節(jié)點的數(shù)據(jù)，當(dāng)前節(jié)點的 Node 對象 |
| node-expand | 節(jié)點被展開時觸發(fā)的事件 | 共三個參數(shù)，依次為：傳遞給 `data` 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身 |
| node-collapse | 節(jié)點被關(guān)閉時觸發(fā)的事件 | 共三個參數(shù)，依次為：傳遞給 `data` 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身 |
| node-drag-start | 節(jié)點開始拖拽時觸發(fā)的事件 | 共兩個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、event |
| node-drag-enter | 拖拽進(jìn)入其他節(jié)點時觸發(fā)的事件 | 共三個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、所進(jìn)入節(jié)點對應(yīng)的 Node、event |
| node-drag-leave | 拖拽離開某個節(jié)點時觸發(fā)的事件 | 共三個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、所離開節(jié)點對應(yīng)的 Node、event |
| node-drag-over | 在拖拽節(jié)點時觸發(fā)的事件（類似瀏覽器的 mouseover 事件） | 共三個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、當(dāng)前進(jìn)入節(jié)點對應(yīng)的 Node、event |
| node-drag-end | 拖拽結(jié)束時（可能未成功）觸發(fā)的事件 | 共四個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、結(jié)束拖拽時最后進(jìn)入的節(jié)點（可能為空）、被拖拽節(jié)點的放置位置（before、after、inner）、event |
| node-drop | 拖拽成功完成時觸發(fā)的事件 | 共四個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、結(jié)束拖拽時最后進(jìn)入的節(jié)點、被拖拽節(jié)點的放置位置（before、after、inner）、event |
### Scoped Slot
| name | 說明 |
|------|--------|
| — | 自定義樹節(jié)點的內(nèi)容，參數(shù)為 { node, data } |

Pagination 分頁

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 是否使用小型分頁樣式 | boolean | — | false |
| background | 是否為分頁按鈕添加背景色 | boolean | — | false |
| page-size | 每頁顯示條目個數(shù)，支持 .sync 修飾符 | number | — | 10 |
| total | 總條目數(shù) | number | — | — |
| page-count | 總頁數(shù)，total 和 page-count 設(shè)置任意一個就可以達(dá)到顯示頁碼的功能；如果要支持 page-sizes 的更改，則需要使用 total 屬性 | Number | — | — |
| pager-count | 頁碼按鈕的數(shù)量，當(dāng)總頁數(shù)超過該值時會折疊 | number | 大于等于 5 且小于等于 21 的奇數(shù) | 7 |
| current-page | 當(dāng)前頁數(shù)，支持 .sync 修飾符 | number | — | 1 |
| layout | 組件布局，子組件名用逗號分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每頁顯示個數(shù)選擇器的選項設(shè)置 | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | 每頁顯示個數(shù)選擇器的下拉框類名 | string | — | — |
| prev-text | 替代圖標(biāo)顯示的上一頁文字 | string | — | — |
| next-text | 替代圖標(biāo)顯示的下一頁文字 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| hide-on-single-page | 只有一頁時是否隱藏 | boolean | — | - |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| size-change | pageSize 改變時會觸發(fā) | 每頁條數(shù) |
| current-change | currentPage 改變時會觸發(fā) | 當(dāng)前頁 |
| prev-click | 用戶點擊上一頁按鈕改變當(dāng)前頁后觸發(fā) | 當(dāng)前頁 |
| next-click | 用戶點擊下一頁按鈕改變當(dāng)前頁后觸發(fā) | 當(dāng)前頁 |
### Slot
| name | 說明 |
|------|--------|
| — | 自定義內(nèi)容，需要在 `layout` 中列出 `slot` |

Badge 標(biāo)記

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| 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
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| icon | 設(shè)置頭像的圖標(biāo)類型，參考 Icon 組件 | string | | |
| size | 設(shè)置頭像的大小 | number/string | number / large / medium / small | large |
| shape | 設(shè)置頭像的形狀 | string | circle / square | circle |
| src | 圖片頭像的資源地址 | string | | |
| srcSet | 以逗號分隔的一個或多個字符串列表表明一系列用戶代理使用的可能的圖像 | string | | |
| alt | 描述圖像的替換文本 | string | | |
| fit | 當(dāng)展示類型為圖片的時候，設(shè)置圖片如何適應(yīng)容器框 | string | fill / contain / cover / none / scale-down | cover |
### Events
| 事件名 | 說明 | 回調(diào)參數(shù) |
| ------ | ------------------ | -------- |
| error | 圖片類頭像加載失敗的回調(diào)， 返回 false 會關(guān)閉組件默認(rèn)的 fallback 行為 |(e: Event) |
### Slot
| 名稱 | 說明 |
| ------ | ------------------ |
| default | 自定義頭像展示內(nèi)容 |

四.Notice 通知

Alert 警告

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 標(biāo)題 | string | — | — |
| type | 主題 | string | success/warning/info/error | info |
| description | 輔助性文字。也可通過默認(rèn) slot 傳入 | string | — | — |
| closable | 是否可關(guān)閉 | boolean | — | true |
| center | 文字是否居中 | boolean | — | true |
| close-text | 關(guān)閉按鈕自定義文本 | string | — | — |
| show-icon | 是否顯示圖標(biāo) | boolean | — | false |
| effect | 選擇提供的主題 | string | light/dark | light |
### Slot
| Name | Description |
|------|--------|
| — | 描述 |
| title | 標(biāo)題的內(nèi)容 |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| close | 關(guān)閉alert時觸發(fā)的事件 | — |

Loading 加載

### 服務(wù)
Loading 還可以以服務(wù)的方式調(diào)用。引入 Loading 服務(wù)：
```javascript
import { Loading } from 'element-ui';
```
在需要調(diào)用時：
```javascript
Loading.service(options);
```
其中 `options` 參數(shù)為 Loading 的配置項，具體見下表。`LoadingService` 會返回一個 Loading 實例，可通過調(diào)用該實例的 `close` 方法來關(guān)閉它：
```javascript
let loadingInstance=Loading.service(options);
this.$nextTick(()=> { // 以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉
loadingInstance.close();
});
```
需要注意的是，以服務(wù)的方式調(diào)用的全屏 Loading 是單例的：若在前一個全屏 Loading 關(guān)閉前再次調(diào)用全屏 Loading，并不會創(chuàng)建一個新的 Loading 實例，而是返回現(xiàn)有全屏 Loading 的實例：
```javascript
let loadingInstance1=Loading.service({ fullscreen: true });
let loadingInstance2=Loading.service({ fullscreen: true });
console.log(loadingInstance1===loadingInstance2); // true
```
此時調(diào)用它們中任意一個的 `close` 方法都能關(guān)閉這個全屏 Loading。
如果完整引入了 Element，那么 Vue.prototype 上會有一個全局方法 `$loading`，它的調(diào)用方式為：`this.$loading(options)`，同樣會返回一個 Loading 實例。

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

Message 消息提示

### 全局方法
Element 為 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本頁面中的方式調(diào)用 `Message`。

### Options
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string / VNode | — | — |
| type | 主題 | string | success/warning/info/error | info |
| iconClass | 自定義圖標(biāo)的類名，會覆蓋 `type` | string | — | — |
| dangerouslyUseHTMLString | 是否將 message 屬性作為 HTML 片段處理 | boolean | — | false |
| customClass | 自定義類名 | string | — | — |
| duration | 顯示時間, 毫秒。設(shè)為 0 則不會自動關(guān)閉 | number | — | 3000 |
| showClose | 是否顯示關(guān)閉按鈕 | boolean | — | false |
| center | 文字是否居中 | boolean | — | false |
| onClose | 關(guān)閉時的回調(diào)函數(shù), 參數(shù)為被關(guān)閉的 message 實例 | function | — | — |
| offset | Message 距離窗口頂部的偏移量 | number | — | 20 |
### 方法
調(diào)用 `Message` 或 `this.$message` 會返回當(dāng)前 Message 的實例。如果需要手動關(guān)閉實例，可以調(diào)用它的 `close` 方法。
| 方法名 | 說明 |
| ---- | ---- |
| close | 關(guān)閉當(dāng)前的 Message |

MessageBox 彈框

### 全局方法
如果你完整引入了 Element，它會為 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本頁面中的方式調(diào)用 `MessageBox`。調(diào)用參數(shù)為：
- `$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';
```
那么對應(yīng)于上述四個全局方法的調(diào)用方法依次為：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，調(diào)用參數(shù)與全局方法相同。

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

Notification 通知

### Options
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 標(biāo)題 | string | — | — |
| message | 說明文字 | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | 是否將 message 屬性作為 HTML 片段處理 | boolean | — | false |
| type | 主題樣式，如果不在可選值內(nèi)將被忽略 | string | success/warning/info/error | — |
| iconClass | 自定義圖標(biāo)的類名。若設(shè)置了 `type`，則 `iconClass` 會被覆蓋 | string | — | — |
| customClass | 自定義類名 | string | — | — |
| duration | 顯示時間, 毫秒。設(shè)為 0 則不會自動關(guān)閉 | number | — | 4500 |
| position | 自定義彈出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | 是否顯示關(guān)閉按鈕 | boolean | — | true |
| onClose | 關(guān)閉時的回調(diào)函數(shù) | function | — | — |
| onClick | 點擊 Notification 時的回調(diào)函數(shù) | function | — | — |
| offset | 偏移的距離，在同一時刻，所有的 Notification 實例應(yīng)當(dāng)具有一個相同的偏移量 | number | — | 0 |
### 方法
調(diào)用 `Notification` 或 `this.$notify` 會返回當(dāng)前 Notification 的實例。如果需要手動關(guān)閉實例，可以調(diào)用它的 `close` 方法。
| 方法名 | 說明 |
| ---- | ---- |
| close | 關(guān)閉當(dāng)前的 Notification |

五.Navigation導(dǎo)航

NavMenu 導(dǎo)航菜單

### Menu Attribute
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal / vertical | vertical |
| collapse | 是否水平折疊收起菜單（僅在 mode 為 vertical 時可用）| boolean | — | false |
| background-color | 菜單的背景色（僅支持 hex 格式） | string | — | #ffffff |
| text-color | 菜單的文字顏色（僅支持 hex 格式） | string | — | #303133 |
| active-text-color | 當(dāng)前激活菜單的文字顏色（僅支持 hex 格式） | string | — | #409EFF |
| default-active | 當(dāng)前激活菜單的 index | string | — | — |
| default-openeds | 當(dāng)前打開的 sub-menu 的 index 的數(shù)組 | Array | — | — |
| unique-opened | 是否只保持一個子菜單的展開 | boolean | — | false |
| menu-trigger | 子菜單打開的觸發(fā)方式(只在 mode 為 horizontal 時有效) | string | hover / click | hover |
| router | 是否使用 vue-router 的模式，啟用該模式會在激活導(dǎo)航時以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) | boolean | — | false |
| collapse-transition | 是否開啟折疊動畫 | boolean | — | true |
### Menu Methods
| 方法名稱 | 說明 | 參數(shù) |
|---------- |-------- |---------- |
| open | 展開指定的 sub-menu | index: 需要打開的 sub-menu 的 index |
| close | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index |
### Menu Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| select | 菜單激活回調(diào) | index: 選中菜單項的 index, indexPath: 選中菜單項的 index path |
| open | sub-menu 展開的回調(diào) | index: 打開的 sub-menu 的 index， indexPath: 打開的 sub-menu 的 index path |
| close | sub-menu 收起的回調(diào) | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path |
### SubMenu Attribute
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| index | 唯一標(biāo)志 | 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 元素。在菜單的定位出現(xiàn)問題時，可嘗試修改該屬性 | boolean | — | 一級子菜單：true / 非一級子菜單：false |
### Menu-Item Attribute
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| index | 唯一標(biāo)志 | string | — | — |
| route | Vue Router 路徑對象 | Object | — | — |
| disabled | 是否禁用 | boolean | — | false |
### Menu-Group Attribute
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 分組標(biāo)題 | string | — | — |

Tabs 標(biāo)簽頁

### Tabs Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 綁定值，選中選項卡的 name | string | — | 第一個選項卡的 name |
| type | 風(fēng)格類型 | string | card/border-card | — |
| closable | 標(biāo)簽是否可關(guān)閉 | boolean | — | false |
| addable | 標(biāo)簽是否可增加 | boolean | — | false |
| editable | 標(biāo)簽是否同時可增加和關(guān)閉 | boolean | — | false |
| tab-position | 選項卡所在位置 | string | top/right/bottom/left | top |
| stretch | 標(biāo)簽的寬度是否自撐開 | boolean | - | false |
| before-leave | 切換標(biāo)簽之前的鉤子，若返回 false 或者返回 Promise 且被 reject，則阻止切換。 | Function(activeName, oldActiveName) | — | — |
### Tabs Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| tab-click | tab 被選中時觸發(fā) | 被選中的標(biāo)簽 tab 實例 |
| tab-remove | 點擊 tab 移除按鈕后觸發(fā) | 被刪除的標(biāo)簽的 name |
| tab-add | 點擊 tabs 的新增按鈕后觸發(fā) | — |
| edit | 點擊 tabs 的新增按鈕或 tab 被關(guān)閉后觸發(fā) | (targetName, action) |
### Tab-pane Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 選項卡標(biāo)題 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 與選項卡綁定值 value 對應(yīng)的標(biāo)識符，表示選項卡別名 | string | — | 該選項卡在選項卡列表中的順序值，如第一個選項卡則為'1' |
| closable | 標(biāo)簽是否可關(guān)閉 | boolean | — | false |
| lazy | 標(biāo)簽是否延遲渲染 | boolean | — | false |

Breadcrumb 面包屑

### Breadcrumb Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | — | 斜杠'/' |
| separator-class | 圖標(biāo)分隔符 class | string | — | - |
### Breadcrumb Item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | 路由跳轉(zhuǎn)對象，同 `vue-router` 的 `to` | string/object | — | — |
| replace | 在使用 to 進(jìn)行路由跳轉(zhuǎn)時，啟用 replace 將不會向 history 添加新記錄 | boolean | — | false |

PageHeader 頁頭

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |------------------------------ | ------ |
| title | 標(biāo)題 | string | — | 返回 |
| content | 內(nèi)容 | string | — | — |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------------- |---------- |
| back | 點擊左側(cè)區(qū)域觸發(fā) | — |
### Slots
| 事件名稱 | 說明 |
|---------- |------------- |
| title | 標(biāo)題內(nèi)容 |
| content | 內(nèi)容 |

Dropdown 下拉菜單

### Dropdown Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 菜單按鈕類型，同 Button 組件(只在`split-button`為 true 的情況下有效) | string | — | — |
| size | 菜單尺寸，在`split-button`為 true 的情況下也對觸發(fā)按鈕生效 | string | medium / small / mini | — |
| split-button | 下拉觸發(fā)元素呈現(xiàn)為按鈕組 | boolean | — | false |
| placement | 菜單彈出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | 觸發(fā)下拉的行為 | 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 | 說明 |
|------|--------|
| — | 觸發(fā)下拉列表顯示的元素。 注意： 必須是一個元素或者或者組件 |
| dropdown | 下拉列表，通常是 `<el-dropdown-menu>` 組件 |
### Dropdown Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| click | `split-button` 為 true 時，點擊左側(cè)按鈕的回調(diào) | — |
| command | 點擊菜單項觸發(fā)的事件回調(diào) | dropdown-item 的指令 |
| visible-change | 下拉框出現(xiàn)/隱藏時觸發(fā) | 出現(xiàn)則為 true，隱藏則為 false |
### Dropdown Menu Item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | 指令 | string/number/object | — | — |
| disabled | 禁用 | boolean | — | false |
| divided | 顯示分割線 | boolean | — | false |
| icon | 圖標(biāo)類名 | string | — | — |

Steps 步驟條

### Steps Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| space | 每個 step 的間距，不填寫將自適應(yīng)間距。支持百分比。 | number / string | — | — |
| direction | 顯示方向 | string | vertical/horizontal | horizontal |
| active | 設(shè)置當(dāng)前激活步驟 | number | — | 0 |
| process-status | 設(shè)置當(dāng)前步驟的狀態(tài) | string | wait / process / finish / error / success | process |
| finish-status | 設(shè)置結(jié)束步驟的狀態(tài) | string | wait / process / finish / error / success | finish |
| align-center | 進(jìn)行居中對齊 | boolean | - | false |
| simple | 是否應(yīng)用簡潔風(fēng)格 | boolean | - | false |
### Step Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 標(biāo)題 | string | — | — |
| description | 描述性文字 | string | — | — |
| icon | 圖標(biāo) | 傳入 icon 的 class 全名來自定義 icon，也支持 slot 方式寫入 | string | — |
| status | 設(shè)置當(dāng)前步驟的狀態(tài)，不設(shè)置則根據(jù) steps 確定狀態(tài) | wait / process / finish / error / success | - |
### Step Slot
| name | 說明 |
|----|----|
| icon | 自定義圖標(biāo) |
| title | 自定義標(biāo)題 |
| description | 自定義描述性文字 |

六.other其他組件

Dialog 對話框

:::tip
Dialog 的內(nèi)容是懶渲染的，即在第一次被打開之前，傳入的默認(rèn) slot 不會被渲染到 DOM 上。因此，如果需要執(zhí)行 DOM 操作，或通過 `ref` 獲取相應(yīng)組件，請在 `open` 事件回調(diào)中進(jìn)行。
:::
:::tip
如果 `visible` 屬性綁定的變量位于 Vuex 的 store 內(nèi)，那么 `.sync` 不會正常工作。此時需要去除 `.sync` 修飾符，同時監(jiān)聽 Dialog 的 `open` 和 `close` 事件，在事件回調(diào)中執(zhí)行 Vuex 中對應(yīng)的 mutation 更新 `visible` 屬性綁定的變量的值。
:::
### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| visible | 是否顯示 Dialog，支持 .sync 修飾符 | boolean | — | false |
| title | Dialog 的標(biāo)題，也可通過具名 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 出現(xiàn)時將 body 滾動鎖定 | boolean | — | true |
| custom-class | Dialog 的自定義類名 | string | — | — |
| close-on-click-modal | 是否可以通過點擊 modal 關(guān)閉 Dialog | boolean | — | true |
| close-on-press-escape | 是否可以通過按下 ESC 關(guān)閉 Dialog | boolean | — | true |
| show-close | 是否顯示關(guān)閉按鈕 | boolean | — | true |
| before-close | 關(guān)閉前的回調(diào)，會暫停 Dialog 的關(guān)閉 | function(done)，done 用于關(guān)閉 Dialog | — | — |
| center | 是否對頭部和底部采用居中布局 | boolean | — | false |
| destroy-on-close | 關(guān)閉時銷毀 Dialog 中的元素 | boolean | — | false |
### Slot
| name | 說明 |
|------|--------|
| — | Dialog 的內(nèi)容 |
| title | Dialog 標(biāo)題區(qū)的內(nèi)容 |
| footer | Dialog 按鈕操作區(qū)的內(nèi)容 |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| open | Dialog 打開的回調(diào) | — |
| opened | Dialog 打開動畫結(jié)束時的回調(diào) | — |
| close | Dialog 關(guān)閉的回調(diào) | — |
| closed | Dialog 關(guān)閉動畫結(jié)束時的回調(diào) | — |

Tooltip 文字提示

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| effect | 默認(rèn)提供的主題 | String | dark/light | dark |
| content | 顯示的內(nèi)容，也可以通過 `slot#content` 傳入 DOM | String | — | — |
| placement | Tooltip 的出現(xiàn)位置 | 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 | 狀態(tài)是否可見 | Boolean | — | false |
| disabled | Tooltip 是否可用 | Boolean | — | false |
| offset | 出現(xiàn)位置的偏移量 | Number | — | 0 |
| transition | 定義漸變動畫 | String | — | el-fade-in-linear |
| visible-arrow | 是否顯示 Tooltip 箭頭，更多參數(shù)可見[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的參數(shù) | Object | 參考 [popper.js](https://popper.js.org/documentation.html) 文檔 | { boundariesElement: 'body', gpuAcceleration: false } |
| open-delay | 延遲出現(xiàn)，單位毫秒 | Number | — | 0 |
| manual | 手動控制模式，設(shè)置為 true 后，mouseenter 和 mouseleave 事件將不會生效 | Boolean | — | false |
| popper-class | 為 Tooltip 的 popper 添加類名 | String | — | — |
| enterable | 鼠標(biāo)是否可進(jìn)入到 tooltip 中 | Boolean | — | true |
| hide-after | Tooltip 出現(xiàn)后自動隱藏延時，單位毫秒，為 0 則不會自動隱藏 | number | — | 0 |
| tabindex | Tooltip 組件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |

Popover 彈出框

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | 觸發(fā)方式 | String | click/focus/hover/manual | click |
| title | 標(biāo)題 | String | — | — |
| content | 顯示的內(nèi)容，也可以通過 `slot` 傳入 DOM | String | — | — |
| width | 寬度 | String, Number | — | 最小寬度 150px |
| placement | 出現(xiàn)位置 | 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 | 狀態(tài)是否可見 | Boolean | — | false |
| offset | 出現(xiàn)位置的偏移量 | Number | — | 0 |
| transition | 定義漸變動畫 | String | — | fade-in-linear |
| visible-arrow | 是否顯示 Tooltip 箭頭，更多參數(shù)可見[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的參數(shù) | Object | 參考 [popper.js](https://popper.js.org/documentation.html) 文檔 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | 為 popper 添加類名 | String | — | — |
| open-delay | 觸發(fā)方式為 hover 時的顯示延遲，單位為毫秒 | Number | — | — |
| close-delay | 觸發(fā)方式為 hover 時的隱藏延遲，單位為毫秒 | number | — | 200 |
| tabindex | Popover 組件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
### Slot
| 參數(shù) | 說明 |
|--- | ---|
| — | Popover 內(nèi)嵌 HTML 文本 |
| reference | 觸發(fā) Popover 顯示的 HTML 元素 |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| show | 顯示時觸發(fā) | — |
| after-enter | 顯示動畫播放完畢后觸發(fā) | — |
| hide | 隱藏時觸發(fā) | — |
| after-leave | 隱藏動畫播放完畢后觸發(fā) | — |

Popconfirm 氣泡確認(rèn)框

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | 標(biāo)題 | String | — | — |
| confirm-button-text | 確認(rèn)按鈕文字 | String | — | — |
| cancel-button-text | 取消按鈕文字 | String | — | — |
| confirm-button-type | 確認(rèn)按鈕類型 | String | — | Primary |
| cancel-button-type | 取消按鈕類型 | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| icon-color | Icon 顏色 | String | — | #f90 |
| hide-icon | 是否隱藏 Icon | Boolean | — | false |
### Slot
| 參數(shù) | 說明 |
|--- | ---|
| reference | 觸發(fā) Popconfirm 顯示的 HTML 元素 |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|--------|---------|
| confirm | 點擊確認(rèn)按鈕時觸發(fā) | — |
| cancel | 點擊取消按鈕時觸發(fā) | — |

Card 卡片

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| header | 設(shè)置 header，也可以通過 `slot#header` 傳入 DOM | string| — | — |
| body-style | 設(shè)置 body 的樣式| object| — | { padding: '20px' } |
| shadow | 設(shè)置陰影顯示時機 | string | always / hover / never | always |

Carousel 走馬燈

### Carousel Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | 走馬燈的高度 | string | — | — |
| initial-index | 初始狀態(tài)激活的幻燈片的索引，從 0 開始 | number | — | 0 |
| trigger | 指示器的觸發(fā)方式 | string | click | — |
| autoplay | 是否自動切換 | boolean | — | true |
| interval | 自動切換的時間間隔，單位為毫秒 | number | — | 3000 |
| indicator-position | 指示器的位置 | string | outside/none | — |
| arrow | 切換箭頭的顯示時機 | string | always/hover/never | hover |
| type | 走馬燈的類型 | string | card | — |
| loop | 是否循環(huán)顯示 | boolean | - | true |
| direction | 走馬燈展示的方向 | string | horizontal/vertical | horizontal |
### Carousel Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|---------|---------|
| change | 幻燈片切換時觸發(fā) | 目前激活的幻燈片的索引，原幻燈片的索引 |
### Carousel Methods
| 方法名 | 說明 | 參數(shù) |
|---------- |-------------- | -- |
| setActiveItem | 手動切換幻燈片 | 需要切換的幻燈片的索引，從 0 開始；或相應(yīng) `el-carousel-item` 的 `name` 屬性值 |
| prev | 切換至上一張幻燈片 | — |
| next | 切換至下一張幻燈片 | — |
### Carousel-Item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 幻燈片的名字，可用作 `setActiveItem` 的參數(shù) | string | — | — |
| label | 該幻燈片所對應(yīng)指示器的文本 | string | — | — |

Collapse 折疊面板

### Collapse Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | 當(dāng)前激活的面板(如果是手風(fēng)琴模式，綁定值類型需要為`string`，否則為`array`) | string / array | — | — |
| accordion | 是否手風(fēng)琴模式 | boolean | — | false |
### Collapse Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------|---------|---------|
| change | 當(dāng)前激活面板改變時觸發(fā)(如果是手風(fēng)琴模式，參數(shù) `activeNames` 類型為`string`，否則為`array`) | (activeNames: array / string) |
### Collapse Item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 唯一標(biāo)志符 | string/number | — | — |
| title | 面板標(biāo)題 | string | — | — |
| disabled | 是否禁用 | boolean | — | — |

Timeline 時間線

### Timeline Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| reverse | 指定節(jié)點排序方向，默認(rèn)為正序 | boolean | — | false |
### Timeline-item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| timestamp | 時間戳 | string | - | — |
| hide-timestamp | 是否隱藏時間戳 | boolean | — | false |
| placement | 時間戳位置 | string | top / bottom | bottom |
| type | 節(jié)點類型 | string | primary / success / warning / danger / info | - |
| color | 節(jié)點顏色 | string | hsl / hsv / hex / rgb | - |
| size | 節(jié)點尺寸 | string | normal / large | normal |
| icon | 節(jié)點圖標(biāo) | string | — | - |
### Timeline-Item Slot
| name | 說明 |
|------|--------|
| — | Timeline-Item 的內(nèi)容 |
| dot | 自定義節(jié)點 |

Divider 分割線

### Divider Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| direction | 設(shè)置分割線方向 | string | horizontal / vertical | horizontal |
| content-position | 設(shè)置分割線文案的位置 | string | left / right / center | center |

Calendar 日歷

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|-----------------|-------------- |---------- |------------ |-------- |
| value / v-model | 綁定值 | Date/string/number | — | — |
| range | 時間范圍，包括開始時間與結(jié)束時間。開始時間必須是周一，結(jié)束時間必須是周日，且時間跨度不能超過兩個月。 | Array | — | — |
| first-day-of-week | 周起始日 | Number | 1 到 7 | 1 |
### dateCell scoped slot 參數(shù)
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|-----------------|-------------- |---------- |------------ |-------- |
| date | 單元格代表的日期 | Date | — | — |
| data | { type, isSelected, day}，`type` 表示該日期的所屬月份，可選值有 prev-month，current-month，next-month；`isSelected` 標(biāo)明該日期是否被選中；`day` 是格式化的日期，格式為 yyyy-MM-dd | Object | — | — |

Image 圖片

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------- |---------- |------------- |-------- |
| src | 圖片源，同原生 | string | — | - |
| fit | 確定圖片如何適應(yīng)容器框，同原生 [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 | 開啟懶加載后，監(jiān)聽 scroll 事件的容器 | string / HTMLElement | — | 最近一個 overflow 值為 auto 或 scroll 的父元素 |
| preview-src-list | 開啟圖片預(yù)覽功能 | Array | — | - |
| z-index | 設(shè)置圖片預(yù)覽的 z-index | Number | — | 2000 |
### Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| load | 圖片加載成功觸發(fā) | (e: Event) |
| error | 圖片加載失敗觸發(fā) | (e: Error) |
### Slots
| 名稱 | 說明 |
|---------|-------------|
| placeholder | 圖片未加載的占位內(nèi)容 |
| error | 加載失敗的內(nèi)容 |

Backtop 回到頂部

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| target | 觸發(fā)滾動的對象 | string | | |
| visibility-height | 滾動高度達(dá)到此參數(shù)值才出現(xiàn) | number | | 200 |
| right | 控制其顯示位置, 距離頁面右邊距 | number | | 40 |
| bottom | 控制其顯示位置, 距離頁面底部距離 | number | | 40 |
### Events
| 事件名 | 說明 | 回調(diào)參數(shù) |
| ------ | ------------------ | -------- |
| click | 點擊按鈕觸發(fā)的事件 | 點擊事件 |

InfiniteScroll 無限滾動

### Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| infinite-scroll-disabled | 是否禁用 | boolean | - |false |
| infinite-scroll-delay | 節(jié)流時延，單位為ms | number | - |200 |
| infinite-scroll-distance| 觸發(fā)加載的距離閾值，單位為px | number |- |0 |
| infinite-scroll-immediate | 是否立即執(zhí)行加載方法，以防初始狀態(tài)下內(nèi)容無法撐滿容器。| boolean | - |true |

Drawer 抽屜

### Drawer Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必須指定該屬性并賦值為 true | boolean | — | false |
| before-close | 關(guān)閉前的回調(diào)，會暫停 Drawer 的關(guān)閉 | function(done)，done 用于關(guān)閉 Drawer | — | — |
| close-on-press-escape | 是否可以通過按下 ESC 關(guān)閉 Drawer | boolean | — | true |
| custom-class | Drawer 的自定義類名 | string | — | — |
| destroy-on-close | 控制是否在關(guān)閉 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 | 是否顯示關(guān)閉按鈕 | boolean | — | true |
| size | Drawer 窗體的大小, 當(dāng)使用 `number` 類型時, 以像素為單位, 當(dāng)使用 `string` 類型時, 請傳入 'x%', 否則便會以 `number` 類型解釋 | number / string | - | '30%' |
| title | Drawer 的標(biāo)題，也可通過具名 slot （見下表）傳入 | string | — | — |
| visible | 是否顯示 Drawer，支持 .sync 修飾符 | boolean | — | false |
| wrapperClosable | 點擊遮罩層是否可以關(guān)閉 Drawer | boolean | - | true |
| withHeader | 控制是否顯示 header 欄, 默認(rèn)為 true, 當(dāng)此項為 false 時, title attribute 和 title slot 均不生效 | boolean | - | true |
### Drawer Slot
| name | 說明 |
|------|--------|
| — | Drawer 的內(nèi)容 |
| title | Drawer 標(biāo)題區(qū)的內(nèi)容 |
### Drawer Methods
| name | 說明 |
| ---- | --- |
| closeDrawer | 用于關(guān)閉 Drawer, 該方法會調(diào)用傳入的 `before-close` 方法 |
### Drawer Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---------- |-------- |---------- |
| open | Drawer 打開的回調(diào) | — |
| opened | Drawer 打開動畫結(jié)束時的回調(diào) | — |
| close | Drawer 關(guān)閉的回調(diào) | — |
| closed | Drawer 關(guān)閉動畫結(jié)束時的回調(diào) | — |

擊“了解更多”獲取Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

默認(rèn)情況下，Kendo UI Grid過濾功能處于禁用狀態(tài)。要控制Grid中的過濾，請使用filterable屬性。

Grid使您可以實現(xiàn)以下過濾器選項：

• 標(biāo)題行過濾
• 通過復(fù)選框過濾
• 自定義菜單過濾

標(biāo)題行過濾

要啟用網(wǎng)格標(biāo)題中的過濾器行，請將模式設(shè)置為row。結(jié)果基于基礎(chǔ)列數(shù)據(jù)的數(shù)據(jù)類型，網(wǎng)格將在列標(biāo)題中呈現(xiàn)字符串值、數(shù)字輸入或日期選擇器的文本框進(jìn)行過濾。您還可以指定默認(rèn)的過濾器運算符，當(dāng)用戶在過濾器文本框中輸入值并從鍵盤按Enter或Tab時將應(yīng)用該默認(rèn)過濾器。 要處理這種情況，請將相應(yīng)列的cell設(shè)置為operator。

<!DOCTYPE?html>
??<html>
??<head><title></title><link?rel="stylesheet"?href="styles/kendo.common.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.mobile.min.css"?/>
<script?src="js/jquery.min.js"></script>
??<script?src="js/kendo.all.min.js"></script>
</head>
??<body>
<div?id="example">
??<div?id="grid"></div>
??<script>
??$(document).ready(function()?{
??$("#grid").kendoGrid({
??dataSource:?{
??type:?"odata",
??transport:?{
??read:?"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
??},
??schema:?{
??model:?{
??fields:?{
??OrderID:?{?type:?"number"?},
??Freight:?{?type:?"number"?},
??ShipName:?{?type:?"string"?},
??OrderDate:?{?type:?"date"?},
??ShipCity:?{?type:?"string"?}
??}
??}
??},
??pageSize:?20,
??serverPaging:?true,
??serverFiltering:?true,
??},
??height:?550,
??filterable:?{
??mode:?"row"
??},
??pageable:?true,
??columns:?
??[{
??field:?"OrderID",
??width:?225,
??filterable:?{
??cell:?{
??showOperators:?false
??}
??}
??},
??{
??field:?"ShipName",
??width:?500,
??title:?"Ship?Name",
??filterable:?{
??cell:?{
??operator:?"contains",
??suggestionOperator:?"contains"
??}
??}
??},{
??field:?"Freight",
??width:?255,
??filterable:?{
??cell:?{
??operator:?"gte"
??}
??}
??},{
??field:?"OrderDate",
??title:?"Order?Date",
??format:?"{0:MM/dd/yyyy}"
??}]
??});
??});
??</script>
??</div>
</body>
??</html>

通過復(fù)選框過濾

要在過濾器菜單中呈現(xiàn)復(fù)選框列表，請為所需的Grid列設(shè)置multi=true，還可以將復(fù)選框過濾器與itemTemplate定義結(jié)合使用，并自定義將顯示的復(fù)選框項目。

<!DOCTYPE?html>
??<html>
??<head><title></title><link?rel="stylesheet"?href="styles/kendo.common.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.mobile.min.css"?/>
<script?src="js/jquery.min.js"></script>
??<script?src="js/kendo.all.min.js"></script>
</head>
??<body>
<div?id="example">
??<style>
??.k-multicheck-wrap?{
??overflow-x:?hidden;
??}
??</style>
??<div?class="demo-section?k-content?wide">
??<h4>Client?Operations</h4>
??<div?id="client"></div>
??</div>
??<div?class="demo-section?k-content?wide">
??<h4>Server?Operations</h4>
??<div?id="server"></div>
??</div>
??<script>
??$(document).ready(function()?{
??var?telerikWebServiceBase?=?"https://demos.telerik.com/kendo-ui/service/";
$("#client").kendoGrid({
??dataSource:?{
??transport:?{
??read:??{
??url:?telerikWebServiceBase?+?"/Products",
??dataType:?"jsonp"
??},
??update:?{
??url:?telerikWebServiceBase?+?"/Products/Update",
??dataType:?"jsonp"
??},
??destroy:?{
??url:?telerikWebServiceBase?+?"/Products/Destroy",
??dataType:?"jsonp"
??},
??create:?{
??url:?telerikWebServiceBase?+?"/Products/Create",
??dataType:?"jsonp"
??},
??parameterMap:?function(options,?operation)?{
??if?(operation?!==?"read"?&&?options.models)?{
??return?{models:?kendo.stringify(options.models)};
??}
??}
??},
??batch:?true,
??pageSize:?20,
??schema:?{
??model:?{
??id:?"ProductID",
??fields:?{
??ProductID:?{?editable:?false,?nullable:?true?},
??ProductName:?{?validation:?{?required:?true?}?},
??UnitPrice:?{?type:?"number",?validation:?{?required:?true,?min:?1}?},
??Discontinued:?{?type:?"boolean"?},
??UnitsInStock:?{?type:?"number",?validation:?{?min:?0,?required:?true?}?}
??}
??}
??}
??},
??filterable:?true,
??pageable:?true,
??height:?550,
??toolbar:?["create",?"save",?"cancel"],
??columns:?[
??{?field:?"ProductName",?filterable:?{?multi:?true,?search:?true}?},
??{?field:?"UnitPrice",?title:?"Unit?Price",?format:?"{0:c}",?width:?120,?filterable:?{?multi:?true?}?},
??{?field:?"UnitsInStock",?title:?"Units?In?Stock",?width:?120,?filterable:?{?multi:?true?}?},
??{?field:?"Discontinued",?width:?120,?filterable:?{?multi:?true,?dataSource:?[{?Discontinued:?true?},?{?Discontinued:?false?}]}?},
??{?command:?"destroy",?title:?" ",?width:?150}],
??editable:?true
??});
$("#server").kendoGrid({
??dataSource:?{
??type:?"odata",
??transport:?{
??read:?telerikWebServiceBase?+?"Northwind.svc/Employees"
??},
??pageSize:?20,
??serverPaging:?true,
??serverSorting:?true,
??serverFiltering:?true,
??},
??editable:?true,
??filterable:?true,
??pageable:?true,
??columns:?[
??{
??field:?"FirstName",
??title:?"First?Name",
??filterable:?{
??multi:?true?,
??//when?serverPaging?of?the?Grid?is?enabled,?dataSource?should?be?provided?for?all?the?Filterable?Multi?Check?widgets
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"FirstName"
??}
??}
??}
??}
??},
??width:?"220px"
??},
??{
??field:?"LastName",
??filterable:?{?
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"LastName"
??}
??}
??}
??},
??multi:?true?
??},
??title:?"Last?Name",
??width:?"220px"
??},
??{
??field:?"Country",
??filterable:?{
??multi:?true,
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"Country"
??}
??}
??}
??},
??itemTemplate:?function(e)?{
??if?(e.field?==?"all")?{
??//handle?the?check-all?checkbox?template
??return?"<div><label><strong><input?type='checkbox'?/>#=?all#</strong></label></div>";
??}?else?{
??//handle?the?other?checkboxes
??return?"<span><label><input?type='checkbox'?name='"?+?e.field?+?"'?value='#=Country#'/><span>#=?Country?#</span></label></span>"
??}
??}
??},
??width:?"220px"
??},
??{
??field:?"City",
??filterable:?{
??multi:?true,
??dataSource:?[{
??City:?"Seattle",
??},{
??City:?"Tacoma",
??},{
??City:?"Kirkland",
??},{
??City:?"Redmond",
??},{
??City:?"London"
??}],
??checkAll:?false
??},
??width:?"220px"
??},
??{
??filterable:?{
??multi:?true,
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"Title"
??}
??}
??}
??}
??},
??field:?"Title"
??}
??]
??});
});
??</script>
??</div>
</body>
??</html>

自定義菜單過濾

您可以為網(wǎng)格過濾器的菜單配置應(yīng)用通用設(shè)置，并在每列中自定義其UI。有關(guān)實現(xiàn)自定義菜單篩選的可運行示例演示了如何：

• 通過設(shè)置extra=false來指定單個過濾條件；
• 將字符串列的過濾器運算符限制為僅、等于和不等于開始；
• 定義內(nèi)置的日期選擇器用戶界面，以過濾網(wǎng)格中的日期時間列；
• 分別為Title和City列實例化Kendo UI AutoComplete和DropDownList。

<!DOCTYPE?html>
??<html>
??<head><title></title><link?rel="stylesheet"?href="styles/kendo.common.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.mobile.min.css"?/>
<script?src="js/jquery.min.js"></script>
??<script?src="js/kendo.all.min.js"></script>
</head>
??<body>
??<script?src="../content/shared/js/people.js"></script>
<div?id="example">
??<div?id="grid"></div>
<script>
??$(document).ready(function()?{
??$("#grid").kendoGrid({
??dataSource:?{
??data:?createRandomData(50),
??schema:?{
??model:?{
??fields:?{
??City:?{?type:?"string"?},
??Title:?{?type:?"string"?},
??BirthDate:?{?type:?"date"?}
??}
??}
??},
??pageSize:?15
??},
??height:?550,
??scrollable:?true,
??filterable:?{
??extra:?false,
??operators:?{
??string:?{
??startswith:?"Starts?with",
??eq:?"Is?equal?to",
??neq:?"Is?not?equal?to"
??}
??}
??},
??pageable:?true,
??columns:?[
??{
??title:?"Name",
??width:?160,
??filterable:?false,
??template:?"#=FirstName#?#=LastName#"
??},
??{
??field:?"City",
??width:?130,
??filterable:?{
??ui:?cityFilter
??}
??},
??{
??field:?"Title",
??filterable:?{
??ui:?titleFilter
??}
??},
??{
??field:?"BirthDate",
??title:?"Birth?Date",
??format:?"{0:MM/dd/yyyy?HH:mm?tt}",
??filterable:?{
??ui:?"datetimepicker"
??}
??}
??]
??});
??});
function?titleFilter(element)?{
??element.kendoAutoComplete({
??dataSource:?titles
??});
??}
function?cityFilter(element)?{
??element.kendoDropDownList({
??dataSource:?cities,
??optionLabel:?"--Select?Value--"
??});
??}
</script>
??</div>
</body>
??</html>

更多最新Kendo UI最新資訊，盡在Telerik中文網(wǎng)！