element table表头自定义

 

<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>