props

events

//this.searchTerm = searchTerm; //this.searchFilter = searchFilter; //this.filtering = filtering; //this.sorting = sorting; //this.paging = paging; } | | create-item | @create-item="(item, itemIndex) => onCreateItem(item, itemIndex)" 事件參數： item: 資料來源項目 itemIndex: 新增資料來源的索引位置 | 於新增資料來源項目時觸發 ex: async onCreateItem(item, index) { this.items.splice(index, 0, item); this.inlineEditItem = Object.assign({}, item); } | | destroy-items | @destroy-items="(selected) => onDestroyItems(selected)" 事件參數： selected: 已勾選的資料列識別鍵 | 於刪除勾選時觸發 | | change-filtering | @change-filtering="({ searchTerm, searchFilter }) => onChangeFiltering({ searchTerm, searchFilter })" 事件參數： searchTerm: 搜尋關鍵詞 searchFilter: 搜尋篩選欄位物件 | 於篩選時觸發 | | change-sorting | @change-sorting="({ key, direction }) => onChangeSorting({ key, direction })" 事件參數： key: 排序欄位屬性鍵 direction: 排序方向(asc, desc) | 於排序時觸發 | | change-paging | @change-paging="({ page, itemsPerPage }) => onChangePaging({ page, itemsPerPage })" 事件參數： page: 頁碼 itemsPerPage: 每頁幾筆(小於等於0者不分頁) | 於分頁時觸發 | | validate-item-failed | @validate-item-failed="({ errors, item }) => onValidateItemFailed({ errors, item })" 事件參數： { errors, item } errors: 錯誤資訊物件({ key: (欄位識別鍵), errors: (錯誤訊息陣列), errMsg: (以分隔符號串接之錯誤訊息) }) item: 行內編輯項目 | 於驗證行內編輯項目失敗時觸發 | | save-create-item | @save-create-item="(item) => onSaveCreateItem(item)" 事件參數： item: 行內編輯項目 | 於儲存新增行內編輯項目時觸發(已通過驗證) | | save-update-item | @save-update-item="(item) => onSaveUpdateItem(item)" 事件參數： item: 行內編輯項目 | 於儲存編輯行內編輯項目時觸發(已通過驗證) | | cancel-item | @cancel-item="(item) => onCancelItem(item)" 事件參數： item: 行內編輯項目 | 於取消行內編輯項目時觸發 | | read-item | @read-item="(item) => onReadItem(item)" 事件參數： item: 資料來源項目 | 於檢視資料來源項目時觸發 | | update-item | @update-item="(item) => onUpdateItem(item)" 事件參數： item: 資料來源項目 | 於編輯資料來源項目時觸發 | | delete-item | @delete-item="(item) => onDeleteItem(item)" 事件參數： item: 資料來源項目 | 於刪除資料來源項目時觸發 |

scoped slots

public methods

columns欄位定義

| --- | --- | --- | --- | --- |

control輸入控制項資訊

| --- | --- | --- | --- | --- |

control.type輸入控制項類型

| --- | --- | --- |

// 預設輸入控制項資料類型
const defaultControlTypes = {
  [String]: 'input',
  [Number]: 'input',
  [Boolean]: 'checkbox',
  [Array]: 'checkboxlist',
  [Date]: 'input'
};

// 適用資料類型
const controlAllowedDataTypes = {
  input: [String, Number, Date],
  select: [String, Number],
  radiobuttonlist: [String, Number],
  checkbox: [Boolean, String, Number],
  checkboxlist: [Array],
  textarea: [String]
};