el-table 表头设置渐变色

html 复制代码
<el-table :data="tableData" stripe>
                    <el-table-column prop="name" label="测试" align="left">
                    </el-table-column>
                    <el-table-column prop="code" label="测试1" align="left">
                    </el-table-column>
                    <el-table-column prop="code1" label="测试2" align="left">
                    </el-table-column>
                    <el-table-column prop="code2" label="测试3(%)" sortable width="180" align="right">
                    </el-table-column>
                    <el-table-column prop="code3" label="测试(%)" sortable align="right">
                    </el-table-column>
                    <el-table-column prop="code4" label="测试(%)" sortable width="180" align="right">
                    </el-table-column>
                    <el-table-column prop="code5" label="测试(%)" sortable align="right">
                    </el-table-column>
                    <el-table-column prop="code6" label="测试(%)" sortable align="right" width="140">
                    </el-table-column>
                    <el-table-column prop="code7" label="排测试名(%)" sortable align="right">
                    </el-table-column>
                    <el-table-column prop="code8" label="测试(%)" sortable align="right" width="140">
                    </el-table-column>
                    <el-table-column prop="code9" label="测试(%)" sortable align="right">
                    </el-table-column>
                </el-table>

style

css 复制代码
<style lang="scss" scoped>
::v-deep .el-table  tr th:nth-child(4).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
    border-top:1px solid #3070d8;
}
::v-deep .el-table  tr th:nth-child(5).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
	border-top:1px solid #3070d8;
}
::v-deep .el-table  tr th:nth-child(8).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
	border-top:1px solid #3070d8;
}
::v-deep .el-table  tr th:nth-child(9).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
	border-top:1px solid #3070d8;
}
</style>

效果

相关推荐
温轻舟28 分钟前
前端开发 -- 自定义鼠标指针样式
开发语言·前端·javascript·css·html·温轻舟
天天打码1 小时前
ThinkPHP项目如何关闭runtime下Log日志文件记录
android·java·javascript
2401_857439691 小时前
智慧社区电商系统:提升用户体验的界面设计
前端·javascript·php·ux
苹果酱05672 小时前
Golang的文件解压技术研究与应用案例
java·vue.js·spring boot·mysql·课程设计
csdnLN2 小时前
$.ajax() 对应事件done() 、fail()、always() 的用法
前端·javascript·ajax
甜味橘阳2 小时前
echarts地图可视化展示
前端·javascript·echarts
谢道韫6663 小时前
今日总结 2024-12-24
javascript·vue.js·elementui
一朵好运莲3 小时前
React引入Echart水球图
开发语言·javascript·ecmascript
梦境之冢4 小时前
axios 常见的content-type、responseType有哪些?
前端·javascript·http
racerun4 小时前
vue VueResource & axios
前端·javascript·vue.js