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>

效果

相关推荐
开心工作室_kaic2 分钟前
ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic
前端·javascript·vue.js
放逐者-保持本心,方可放逐3 分钟前
vue3 中那些常用 靠copy 的内置函数
前端·javascript·vue.js·前端框架
IT古董3 分钟前
【前端】vue 如何完全销毁一个组件
前端·javascript·vue.js
Henry_Wu0015 分钟前
从swagger直接转 vue的api
前端·javascript·vue.js
奋飞安全6 分钟前
初试js反混淆
开发语言·javascript·ecmascript
M_emory_42 分钟前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito1 小时前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
fighting ~1 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录1 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
abments1 小时前
JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)
javascript·爬虫·python