vue 使用render 動態建立element ui table
阿新 • • 發佈:2020-10-14
建立一個 createTable.js 檔案
JavaScript/**
* 動態建立 table
* @module widgets/my-table
* @example
*
* // 使用說明
*/
export default {
name: "createTable",
/**
* 屬性引數
* @property {Array} [tableData = []] data table表格資料
* @property {Array} [tableHeader = []] data table頭部內容
* @property {Object} [defaultName = { lable: "lable",
prop: "prop",
icon: "icon",
width: "width",
type: "type",
tag: "tag",
tableColumnAttributes: "tableColumnAttributes" }] defaultName 指引查詢引數
* @property {Function} cellClick 當某個單元格被點選時會觸發該事件 row, column, cell, event
* @property {Function} select 當用戶手動勾選資料行的 Checkbox 時觸發的事件 selection, row
* @property {Function} selectAll 當用戶手動勾選全選 Checkbox 時觸發的事件 selection
* @property {Function} selectionChange 當選擇項發生變化時會觸發該事件 selection
* @property {Function} cellMouseEnter 當單元格 hover 進入時會觸發該事件 row, column, cell, event
* @property {Function} cellMouseLeave 當單元格 hover 退出時會觸發該事件 row, column, cell, event
* @property {Function} celldblClick 當某個單元格被雙擊擊時會觸發該事件 row, column, cell, event
* @property {Function} rowClick 當某一行被點選時會觸發該事件 row, column, event
* @property {Function} rowContextMenu 當某一行被滑鼠右鍵點選時會觸發該事件 row, column, event
* @property {Function} rowdblClick 當某一行被雙擊時會觸發該事件 row, column, event
* @property {Function} headerClick 當某一列的表頭被點選時會觸發該事件 column, event
* @property {Function} headerContextMenu 當某一列的表頭被滑鼠右鍵點選時觸發該事件 column, event
* @property {Object} tableAttributes(Table Attributes) 參考 https://element.eleme.cn/#/zh-CN/component/table (max-height 這種要寫成maxHeight)
* @property {Function} operationCallback 操作項回撥 event, props
*/
props: {
// 資料欄位名稱對映
defaultName: {
type: Object,
default() {
return {
lable: "lable",
prop: "prop",
icon: "icon",
width: "width",
type: "type",
tag: "tag",
tableColumnAttributes: "tableColumnAttributes"
};
}
},
tableData: {
type: Array,
default() {
return [];
}
},
tableHeader: {
type: Array,
default() {
return [];
}
},
cellClick: {
type: Function,
default: res => {
return res;
}
},
select: {
type: Function,
default: res => {
return res;
}
},
selectAll: {
type: Function,
default: res => {
return res;
}
},
selectionChange: {
type: Function,
default: res => {
return res;
}
},
cellMouseEnter: {
type: Function,
default: res => {
return res;
}
},
cellMouseLeave: {
type: Function,
default: res => {
return res;
}
},
celldblClick: {
type: Function,
default: res => {
return res;
}
},
rowClick: {
type: Function,
default: res => {
return res;
}
},
rowContextMenu: {
type: Function,
default: res => {
return res;
}
},
rowdblClick: {
type: Function,
default: res => {
return res;
}
},
headerClick: {
type: Function,
default: res => {
return res;
}
},
headerContextMenu: {
type: Function,
default: res => {
return res;
}
},
tableAttributes: