循环生成的el-table-column 如何根据字段长短适配宽度、固定左侧第一列后样式出问题

本人新手前端一个，这几天再改关于el-table的一些bug的时候，感觉这些小问题有时候挺影响人心情的。所以做一个记录和分享，这也是我在掘金的第一篇博客。希望大佬可以多多指点！！

今天在改el-table的时候发现循环的el-table-column无法固定设置width属性 就想着能不能把他改成变量 根据每个label的length去判断呢。话不多说直接上代码

            <el-table-column v-for="(item, i) in tsElectricColumn" :key="i" :prop="item.name" :label="item.label" align="center">
               <el-table-column v-for="(items, is) in item.Children" :key="is" :prop="items.name" :label="items.label" align="center">
                  <el-table-column v-for="(itemss, iss) in  items.Children" :key='iss' :prop='itemss.name' :label='itemss.label' :width="renderHeader(item.label)" align='center' :show-overflow-tooltip="true">
                     <template slot-scope="scope">
                        <span :class="(scope.row[itemss.name] < 0 ? 'textRed' : '')">{{scope.row[itemss.name] != null ? scope.row[itemss.name] : '--'}}</span>
                     </template>
                  </el-table-column>
               </el-table-column>
            </el-table-column>
         </el-table>

注意：这里的 :width="renderHeader()"只能给最内层的加哦，如果给最外层的可能失效的

renderHeader(item) {
         let width;

         if(item.length <= 6) {
            if(item.length == 0) {
               width = item.length * 0;
            }
            else {
               width = item.length * 20;
            }
         }
         else {
            width = item.length * 15;
         }

         return width;
      },

然后还遇到了一个问题 当你需要让最左边的那一列固定 不受横向滚动条的影响的时候 element ui 官网提供了一个属性叫 fixed 当你需要哪一列固定的时候 就给哪一个el-table-column 加上就好了 但是加上的这条属性后 这一列可以固定了 但是高度上会短一点点 那怎么解决呢 往下看

        
   .table-fixed{
  ::v-deep .el-table__fixed-left {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
  ::v-deep .el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}

只需要给样式里加上这个就好啦！！！

到此就完成了！！！第一次写博客，希望各位大佬多多指点！！小弟感激不尽！！