<template>
<el-table ref="singleTable" :data="tableData" border :max-height="height" :span-method="arraySpanMethod" style="width: 100%;" @cell-click="clickCell">
<el-table-column prop="name" label=""></el-table-column>
<el-table-column v-for="x in xs" :key="x.key" :prop="x.key" :label="x.label" :render-header="renderHeader" :ref="x.key" :width="150"></el-table-column>
</el-table>
</template>
<script>
.....
methods: {
renderHeader(createElement, { column }) {
return null;
if (this.tableHeader[column.label]) {
return createElement(
'div',
{
attrs: {
style: "text-align:center;width:100%;backgroup:red;"
}
},
[
createElement('img', {
attrs: {
src: this.tableHeader[column.label].logo,
style: "width:48px;"
}
}),
createElement('br', []),
createElement('span',
{
style:"font-family:arial;font-size:12px;color:black;font-width:normal;"
},
[
this.tableHeader[column.label].name
])
]
);
}
return null;
},
clickCell(row, column, cell, event) {
if (column.label == "")
return;
console.log("(" + column.label + "," + row.field + ")");
let c = event.target.parentElement.children;
for (let i = 1; i < c.length; i++) {
c[i].style="background:white";
}
event.target.style="background:green";
},
....
</script>