element-UI Table组件样式修改记录

最近在自己瞎玩的过程中想修改一下element Table组件样式，起初使用了很多种方法都没有达到想要的效果。后来看官方文档发现，ele已经给我们预留了很多修改样式的属性接口。我们只需要绑定对应的样式就可以满足大多数的样式需求。！！！汗颜自己没好好把官方文档看一下，没办法看到密密麻麻的字就头疼。这篇文章就留着单独记录Table组件的内容，以后有什么值得记录的新内容都会来补充。

表格背景样式修改

官网已经给出了明确的注释，我们既可以可以选择在methods中通过回调方法的形式，也可以在data中直接设定一个对象来达到自定义渲染组件样式的目的，需要注意一点的是，要仔细看好需要返回的是字符串还是对象。
例子：

 <el-table
          :data="tableData"
          style="width: 100%;"  :row-style="row">
 =================================================================         
 row: {
          'background-color': 'red'
        }

 <el-table
          :data="tableData"
          style="width: 100%;"  :row-style="rowStyle">
 rowStyle ({row, rowIndex}) {
 ===============================================================
        return {'background-color': 'red'}
      },

用法就这么简单，具体可以根据需求去查看官方文档给出的属性。

表格鼠标悬浮背景样式修改：

我曹为了截到这个图真是呕心沥血！！！

同时从这里可以看到ele定义table鼠标悬浮动画变化过程，有了这些信息后我们就可以自由的修改背景颜色和动画样式

.el-table >>>  .el-table__body tr:hover>td{
    background-color:#42b983 !important;
  }
 .el-table >>> .el-table--enable-row-hover{
    background-color:#42b983 !important;
  } 

表格宽度自适应：

之前在自己瞎捣鼓的时候发现 el-table-column 绑定了width值后表格宽度并不能随着窗口大小自适应，并且ele官方是把单位定死的只能使用px或者%，尝试着各种方法设置 el-table-column宽度都失败了。最后没办法只能想到动态监控窗口大小，通过不同窗口计算出width值进行绑定。通过这样的方式实现了表格宽度的自适应，虽然方法不够优雅但是限于目前是个渣渣能力有限只能暂且想到这种方式。之后有更好的方法会回来更新。

监控窗口大小：

 mounted () {
      window.onresize = () => {
        return (() => {
          this.tableWidth = document.body.clientWidth * 0.07
          console.log('初始化表格宽度' + this.tableWidth)
        })()
      }
    }

动态绑定表格宽度：

 <el-table-column prop="accountID" label="账号ID" :width="tableWidth" ></el-table-column>