创建一个 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",
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;
}
}