创建一个 createTable.js 文件
/**
* 动态创建 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: {
type: Object,
default() {
return {
stripe: false,
border: false
};
}
},
operationCallback: {
type: Function,
default: res => {
return res;
}
}
},
methods: {
grouping(array) {
let groups = {
default: []
};
let props = this.defaultName;
array.forEach(n => {
let key = n[props.group];
if (key) {
groups[key] = groups[key] || [];
groups[key].push(n);
} else {
groups["default"].push(n);
}
});
return groups;
},
createTableColumn(h, item) {
let props = this.defaultName;
return h("el-table-column", {
props: {
...item[props.tableColumnAttributes],
prop: item[props.prop],
label: item[props.lable],
width: item[props.width]
}
});
},
createTableColumnSelect(h, item) {
let props = this.defaultName;
return h("el-table-column", {
props: {
...item[props.tableColumnAttributes],
width: item[props.width],
type: "selection"
}
});
},
createTableColumnOperation(h, item) {
let props = this.defaultName;
let tagItem = item[props.tag];
let _this = this;
return h("el-table-column", {
props: {
...item[props.tableColumnAttributes],
prop: item[props.prop],
label: item[props.lable],
width: item[props.width]
},
scopedSlots: {
default: function(props) {
let nodes = [];
tagItem.forEach(items => {
nodes.push(
h(
items.tagType,
{
props: {
...items.attributes
},
nativeOn: {
click: event => {
_this.operationCallback(event, props);
}
}
},
items.name
)
);
});
return nodes;
}
}
});
},
createNodes(h, array) {
let nodes = [],
groups = this.grouping(array);
let props = this.defaultName;
for (let key in groups) {
let items = groups[key] || [];
items.forEach(item => {
// nodes.push(this.createTableColumn(h, item));
if (item[props.type] === "normal") {
//创建数据列
nodes.push(this.createTableColumn(h, item));
} else if (item[props.type].toLowerCase() == "select") {
//创建选择列
nodes.push(this.createTableColumnSelect(h, item));
} else {
if (item[props.tag].length > 0 && item[props.tag] != undefined) {
//创建操作列
nodes.push(this.createTableColumnOperation(h, item));
}
}
});
}
return nodes;
}
},
render(h) {
console.log(1);
return h(
"el-table",
{
props: {
...this.tableAttributes,
data: this.tableData
},
nativeOn: {},
class: "custom-table",
on: {
select: (selection, row) => {
this.select(selection, row);
},
"select-all": selection => {
this.selectAll(selection);
},
"selection-change": selection => {
this.selectionChange(selection);
},
"cell-mouse-enter": (row, column, cell, event) => {
this.cellMouseEnter(row, column, cell, event);
},
"cell-mouse-leave": (row, column, cell, event) => {
this.cellMouseLeave(row, column, cell, event);
},
"cell-click": (row, column, cell, event) => {
this.cellClick(row, column, cell, event);
},
"cell-dblclick": (row, column, cell, event) => {
this.celldblClick(row, column, cell, event);
},
"row-click": (row, column, event) => {
this.rowClick(row, column, event);
},
"row-contextmenu": (row, column, event) => {
this.rowContextMenu(row, column, event);
},
"row-dblclick": (row, column, event) => {
this.rowdblClick(row, column, event);
},
"header-click": (column, event) => {
this.headerClick(column, event);
},
"header-contextmenu": (column, event) => {
this.headerContextMenu(column, event);
}
// "sort-change": (selection, row) => {
// console.log(selection, row);
// },
// "filter-change": (selection, row) => {
// console.log(selection, row);
// },
// select: (selection, row) => {
// console.log(selection, row);
// }
},
ref: "table"
},
this.createNodes(h, this.tableHeader)
);
}
};
/**render(createElement){ return createElement('标签名'，'执行的操作'，'展示的内容') } */创建table数据标题文件
/***
* @property {Object} tableColumnAttributes 对应(Table-column Attributes) https://element.eleme.cn/#/zh-CN/component/table 但lable、prop、width 参数除外
* type 用来做类型判断 目前有三种一是 normal 二是select 三默认 分别对应生成数据表格、table表格可选、操作按钮生成
*/
module.exports = {
test: [
{
lable: "站點",
prop: "name",
width: "60",
type: "normal",
tableColumnAttributes: {}
},
{ lable: "站點編碼", prop: "date", type: "normal" },
{ lable: "綁定線路", prop: "address", type: "normal" },
{ lable: "站牌種類", prop: "1", type: "normal" },
{ lable: "佈局模式", prop: "1", type: "normal" },
{ lable: "重啟時間", prop: "1", type: "normal" },
{ lable: "同步時間", prop: "1", type: "normal" },
{ lable: "節目下載", prop: "1", type: "normal" },
{ lable: "截屏", prop: "1", type: "normal" },
{ lable: "刷新頻率", prop: "1", type: "normal" },
{ lable: "黑夜模式", prop: "1", type: "normal" },
{ lable: "狀態", prop: "1", type: "normal" },
{
lable: "詳情",
prop: "1",
type: "button",
tag: [
{
name: "删除",
tagType: "el-button",
attributes: {
size: "mini",
type: "danger"
}
}
]
}
]
};使用
<template>
<section class="content">
<el-row>
<el-col :span="24"
><div class="grid-content bg-purple-dark">
<createTable
:tableData="tableData"
:tableHeader="tableDataHeader"
:tableAttributes="{ stripe: true, border: true }"
:operationCallback="sdf"
>
</createTable></div
></el-col>
</el-row>
</section>
</template>
<script>
import tableHeader from "../components/table/testTable.js";
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
tempHtml: `<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>`
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
tempHtml: `<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>`
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
tempHtml: `<button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</button>`
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
tempHtml: `<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>`
}
],
tableDataHeader: null
};
},
created: function() {
console.log(tableHeader);
this.tableDataHeader = tableHeader.test;
},
methods: {
sdf(event, props) {
console.log(event, props);
}
},
components: {
createTable: resolve =>
require(["../components/table/createTable.js"], resolve)
}
};
</script>
<style scoped>
.content {
box-sizing: border-box;
padding: 15px;
}
</style>效果：
评论区