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>

效果

相关推荐
inksci1 小时前
Vue 3 中通过 this. 调用 setup 暴露的函数
前端·javascript·vue.js
未来之窗软件服务2 小时前
monaco-editor 微软开源本地WEB-IDE-自定义自己的开发工具
开发语言·前端·javascript·编辑器·仙盟创梦ide
南方下小雨2 小时前
基于Spring Boot + Vue 项目中引入deepseek方法
vue.js·spring boot·后端
向明天乄3 小时前
Vue3 后台管理系统模板
前端·vue.js
香蕉可乐荷包蛋3 小时前
vue 常见ui库对比(element、ant、antV等)
javascript·vue.js·ui
朝阳395 小时前
Electron Forge【实战】自定义菜单 -- 顶部菜单 vs 右键快捷菜单
前端·javascript·electron
叶浩成5205 小时前
a-upload组件实现文件的上传——.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt
javascript·pdf·powerpoint
inksci5 小时前
watch 数组 Vue 3
前端·javascript·vue.js
Clf丶忆笙6 小时前
JavaScript性能优化实战:从基础到高级的全面指南
javascript·性能优化
前端没钱7 小时前
在Electron中爬取CSDN首页的文章信息
前端·javascript·爬虫·electron