vue + element-ui 修改el-table 表头的背景颜色横向渐变色 + 修改表头背景颜色
表头背景颜色横向渐变效果图：
修改表头背景颜色和字体颜色效果图：
直接上代码：
修改表头的背景颜色横向渐变色的代码
html：
<template><div><el-table :data="tableData"border><el-table-column prop="date"label="日期"width="180"></el-table-column><el-table-column prop="name"label="姓名"width="180"></el-table-column><el-table-column prop="address"label="地址"></el-table-column></el-table></div></template>
js：
<script>export default {data () {return {tableData: [{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}}</script>
css：
<style lang="scss" scoped>/deep/ {//修改表头的背景颜色横向渐变色.el-table {thead {color: #fff;font-weight: 500;background: linear-gradient(to right, #6fa3fe, #4cdafe) !important;& th {//inherit：规定应该从父元素继承 background-color 属性的设置。//transparent：默认。背景颜色为透明。// background-color: inherit !important;background-color: transparent;}& tr {// background-color: inherit !important;background-color: transparent;}}}}</style>
修改表头背景颜色和字体颜色
header-cell-style是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style，也可以用深度选择器修改等等。
这里使用header-cell-style属性：
<el-table :data="tableData"border:header-cell-style="{background:'#e1e4e5',color:'#80878f'}"><el-table-column prop="date"label="日期"width="180"></el-table-column><el-table-column prop="name"label="姓名"width="180"></el-table-column><el-table-column prop="address"label="地址"></el-table-column></el-table>
直接添加header-cell-style属性就可以了
<el-table :header-cell-style="{background:'#e1e4e5',color:'#80878f'}">...</el-table>
