vue2怎么修改el-table样式

前端开发友友们使用el-table的场景是非常多的，尤其是在中后台管理系统，但我们想更灵活的更改表格样式，又不想使用穿透的方式该怎么做呢，很简单，以下分为修改表头样式和表格内容样式两部分：

1.修改表头样式：header-cell-style

在el-table中加入header-cell-style属性，可以更改任何你想要的表头样式，包括颜色，字体，大小等。

复制代码

<el-table
        max-height="550px"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          fontFamily: 'SF-Pro-Text-Medium',
          fontSize:'14px',
          color:'#000000',
        }"
      >
//中间是你自己渲染的表格数据
</el-table>

2.修改表格内容：row-style

在el-table中加入row-style属性，可以更改任何你想要的表格内容样式，包括颜色，字体，大小等。如行高，字体大小，颜色边框等

复制代码

<el-table
        border
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          fontFamily: 'SF-Pro-Text-Medium',
          fontSize:'14px',
          color:'#000000',
        }"
        :row-style="{ height: '50px' }"
      >
//中间是你自己的表格数据
</el-table>

另外如果只想修改单元列的宽度时，只需要在<el-table-column>上加上width='xxx'属性即可