el-table 表头设置渐变色

这篇具有很好参考价值的文章主要介绍了el-table 表头设置渐变色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<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

<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>

效果

 文章来源地址https://www.toymoban.com/news/detail-606168.html

到了这里,关于el-table 表头设置渐变色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-table动态生成多级表头的表格(js + ts)

    展示形式: 详细代码: (js) (ts)

    2024年02月10日
    浏览(32)
  • element ui - el-table 设置表头背景颜色和字体颜色

    在使用 elementui 中的 el-table 时,由于默认表格样式与设计稿不符,需要将表头的背景色和字体颜色设置为新颜色。 但是对 thead,thead tr,.el-table__cell 元素进行设置,都是无效的,查询了 elementui官网,发现需要使用 header-cell-style 属性。

    2024年02月12日
    浏览(62)
  • vue + el-table点击表头改变其当前样式

    废话不多说,先看效果: 网上找了一大圈没有符合的,只能自己看着搞: 直接贴代码: 这种写法经使用过程中发现问题,故修改为以下:

    2024年02月13日
    浏览(31)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(51)
  • Vue结合ElementUi修改<el-table>表格的背景颜色和表头样式

    修改table的表头背景 和 字体颜色: 以下是修改el-table表格内容的背景色和边框样式:

    2024年02月11日
    浏览(44)
  • Vue - Element el-table 表头、行、列合并,底部或顶部显示汇总行

    GitHub Demo 地址 在线预览 使用 el-table 的 span-method 方法合并行和列 使用 el-table 的 header-cell-style 方法合并表头 使用 el-table 的 cell-class-name 方法配合css样式隐藏Checkbox 使用 el-table 的 show-summary 、 summary-method 方法配合css样式设置汇总行和汇总行样式

    2024年02月14日
    浏览(35)
  • Vue结合el-table实现合并单元格(以及高亮单元表头和指定行)

    实现效果如下: 思路: 1.首先使用动态表头表格。 2.其次实现动态计算合并单元格。(计算规则 传递需要合并的字段) 3.然后封装公共的计算单元格方法 export导出供多个页面使用。 4.同时需要封装成公共的组件供多个页面使用。 5.组件内写指定表头行高亮颜色以及指定行高

    2024年04月10日
    浏览(38)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(44)
  • vue3中el-table实现多表头并表格合并行或列

    1、el-table中添加事件 :span-method=\\\"genderSpanCity\\\" 2、js添加函数 效果图为

    2024年01月23日
    浏览(42)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包