element ui 表格插件分别修改thead跟tbody样式问题

调试完的代码：

<el-table
       :data="tableData"
       :style="{width: '100%','font-size': '.14rem',color: '#666666'}"
       :header-cell-class-name="headClass"
       :header-cell-style="headCellStyle"
       :cell-style="cellStyle"
       :cell-class-name="cellClass"
>
       <ex-table-column
              v-for="(item, i) in months"
              :key="i"
              :prop="item.prop"
              :label="item.label"
              :autoFit='true'
        ></ex-table-column>
</el-table>

// js部分
// 单元格类名使用方法
cellClass({row, rowIndex}){
    return 'cell-class'; // 返回类名，在全局中写样式才生效
},
// 单元格的 style 的回调方法
cellStyle({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
    return `padding-left: .7rem; color: #000; font-weight: 700;`;
    } else {
        return ''
    }
},
// 表头行的 style 的回调方法
headCellStyle({ row, column, rowIndex, columnIndex }) {
    if(rowIndex === 0 && columnIndex === 0){
        return `padding-left:.7rem;`;
    }else {
        return ''
    }
},
headClass({row, rowIndex}) {
    return 'head-class'; // 返回类名，在全局中写样式才生效
},

    为什么我四个都用了，因为表头跟表体除了公共的样式，还要单独给某一列设置不同的样式。用class控制公共的样式，style控制单独的样式。

<style>
    .el-table .cell {/* 使用ex-column固定写法 */
        white-space: nowrap;
        width: fit-content; 
    }
    .el-table .el-table__header .head-class { /* 直接写新增的类名权重不够，需要加一些父级*/
        background-color: rgba(76,184,141, .1);
        border-bottom: 0 none;
        border-radius: .01rem;
        color: #000;
        padding: 0;
        height: .54rem;
    }
    .el-table .cell-class {
        height: .54rem;
        padding: 0;
    }
</style>

:render-header 改变列宽问题

问题描述：el-table会自动分配列宽，但是表格需要动态渲染，文字的内容不确定有时会折行，初始我想通过:render-header动态计算列宽。

<el-table
        :data="tableData"
        :style="{width: '100%','font-size': '.14rem',color: '#666666'}"
        :render-header="labelHead"
 >
   <el-table-column
          v-for="(item, i) in months"
          :key="i"
          :prop="item.prop"
          :label="item.label"
   >
   </el-table-column>
</el-table>

labelHead(h, {column, $index}) {
                let l = column.label.length
                // console.log('label',l);
                let f = 19 //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
                column.minWidth = f * l //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
                // console.log(column.minWidth,'minwidth',f * l);
                // //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
                return h('div', {class: 'table-head', style: {width: '100%'}}, [column.label])

<style scoped>
    .table-head{
        font-size: .14rem!important;
    }
</style>

但是这么写有一个问题，页面初始化时不生效。得缩放完窗口才生效，并且单元格文字差多，列宽也差很多，不均匀。宽的过宽，窄的太窄，所以还是得用插件ex-column解决。
这次写表格也是问题多多，太讨厌写表格了~ ^~