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>

效果

相关推荐
摸鱼的春哥1 小时前
Agent教程15:认识LangChain,Agent框架的王(上)
前端·javascript·后端
明月_清风2 小时前
自定义右键菜单:在项目里实现“选中文字即刻生成新提示”
前端·javascript
明月_清风2 小时前
告别后端转换:高质量批量导出实战
前端·javascript
刘发财7 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
ssshooter14 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
Live0000015 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉15 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
球球pick小樱花15 小时前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
前端Hardy16 小时前
干掉 Virtual DOM?尤雨溪开始"强推" Vapor Mode?
vue.js·vue-router