el-table 列背景色渐变

news2024/11/18 17:33:15

最初的想法是，给每一行添加背景色，逐行递减透明度，发现结果比较突兀，效果如下：
在这里插入图片描述

如果有需要这种样式的，代码如下：

<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      colors: [
        '247, 162, 20',
        '254, 230, 100',
        '153, 221, 226',
        '211, 110, 197',
        '150, 227, 161',
        '238, 206, 112',
        '116, 220, 187',
        '116, 148, 218',
        '216, 117, 146',
        '245, 196, 156'
      ]
    }
  },
  methods: {
    headerCellStyle ({ row, column, rowIndex, columnIndex }) {
      const { colors } = this
      const styleObj = {
        backgroundColor: `rgb(${colors[columnIndex]})`,
        color: '#333'
      }
      return styleObj
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      const { tableData, colors } = this
      const dataLength = tableData.length // 数据长度
      const gradientNum = dataLength + 1 // 渐变数量加1
      const startOpacity = 0.7 // 起始透明度
      const interval = startOpacity / gradientNum // 计算每行的渐变间隔
      const opacity = startOpacity - rowIndex * interval
      const styleObj = {
        backgroundColor: `rgba(${colors[columnIndex]}, ${opacity})`,
        border: 'none'
      }
      return styleObj
    }
  }
}
</script>

思考了一下，如果只能给每行设置背景色，又要看起来向整体渐变，则需要每行设置渐变，使每行有衔接效果，即1行：0.6 ~ 0.5，2行：0.5 ~ 0.4 以此类推。
在这里插入图片描述
计算方法：透明度 / 通过总数据量（行数）= 每行透明间隔 再每行递减即可。

最终代码

<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        gender: '男',
        mobile: '17688888888',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      colors: [
        '247, 162, 20',
        '254, 230, 100',
        '153, 221, 226',
        '211, 110, 197',
        '150, 227, 161',
        '238, 206, 112',
        '116, 220, 187',
        '116, 148, 218',
        '216, 117, 146',
        '245, 196, 156'
      ]
    }
  },
  methods: {
    headerCellStyle ({ row, column, rowIndex, columnIndex }) {
      const { colors } = this
      const styleObj = {
        backgroundColor: `rgb(${colors[columnIndex]})`,
        color: '#333'
      }
      return styleObj
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      const { tableData, colors } = this
      const dataLength = tableData.length // 数据长度
      const gradientNum = dataLength + 1 // 渐变数量加1
      const startOpacity = 0.7 // 起始透明度
      const interval = startOpacity / gradientNum // 计算每行的渐变间隔
      const opacity1 = startOpacity - rowIndex * interval
      const opacity2 = startOpacity - interval - rowIndex * interval
      const styleObj = {
        backgroundImage: `linear-gradient(to bottom, rgba(${colors[columnIndex]}, ${opacity1}), rgba(${colors[columnIndex]}, ${opacity2}))`,
        border: 'none'
      }
      return styleObj
    }
  }
}
</script>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1011656.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小麦苗GreenPlum学习大纲

小麦苗GreenPlum学习大纲

腾讯文档 课程文档内容如下&#xff1a; 小麦苗GreenPlum课程公开课-- 数据库通用学习路线、答疑、培训、考证等&#xff1a;https://docs.qq.com/doc/p/b65bcd7647a9974a94b97fb06d04a089c25a7f0c 小麦苗GreenPlum课程第0节-- 数据库简介、分类、发展、流行度排名等&#xf…
阅读更多...
Docker容器化技术（从零学会Docker）

Docker容器化技术（从零学会Docker）

文章目录 前言一、初识Docker1.初识Docker-Docker概述2.初识Docker-安装Docker3.初识Docker-Docker架构4.初识Docker-配置镜像加速器 二、Docker命令1.Docker命令-服务相关命令2.Docker命令-镜像相关命令3.Docker命令-容器相关命令 三、Docker容器的数据卷1.Docker容器数据卷-数…
阅读更多...
Python：函数定义的参数

Python：函数定义的参数

相关阅读 Python专栏https://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 函数定义就是定义一个用户自定义的函数对象&#xff0c;它的语法的BNF范式如下所示&#xff0c;有关BNF范式的规则&#xff0c;可以参考之前的文章。 funcdef …
阅读更多...
asp.net+sqlserver+c#教师工作量计算系统

asp.net+sqlserver+c#教师工作量计算系统

本课题主要是解决工作量管理管理中的日常中涉及到的问题&#xff0c;目标是使工作量在管理上做到数据的信息化、快速化。 系统在实现上应至少具有如下功能&#xff1a; (1)教师信息管理 该模块包括教师信息的添加、修改。 (2)个人信息 该模块是对用户登录系统后对自己信息的修改…
阅读更多...
C-结构体

C-结构体

目录 结构体 定义结构体 第一种方式 定义的同时定义变量名 第三种方式 赋值和初始化 如何取出结构体成员 结构体变量&#xff0c;结构体指针作为函数参数进行传递 结构体运算 结构体 形成了一个新的数据类型 定义结构体 第一种方式 定义一个新的数据类型&#xf…
阅读更多...
Unity - Shader Compiled Log

Unity - Shader Compiled Log

文章目录 吐槽开启 Log Shader Compilation实践资源准备Build ABTesting ScriptShader Compiled Log Project 吐槽 先说一下&#xff0c;最近几天前&#xff0c;纷纷看到 unity install fee 的天才收费方案 真的忍不住吐槽&#xff0c;我只想说&#xff1a; “no zuo no die”…
阅读更多...
旋转框/微调按钮的基类--QAbstractSpinBox 类

旋转框/微调按钮的基类--QAbstractSpinBox 类

1、 QAbstractSpinBox 类是 QWidget 类的直接子类&#xff0c;虽然该类不是抽象类&#xff0c;但该类并未提供实 际的功能&#xff0c;仅为旋转框提供了一些外观的形式以及需要子类实现了成员&#xff0c; 也就是说点击微调按钮的上/下按钮&#xff0c;不会使其中的数值有变化。…
阅读更多...
Visual Studio批量删除换行

Visual Studio批量删除换行

1. 使用ctrlh可以打开替换窗体 2.alte选择窗体中的正则表达式 使用正则表达式&#xff1a; ^\s*$ ^代表行首 $代表行尾 \s代表任意不可见字符&#xff0c;例如空格、Tab等 *代表匹配\s任意次 结果&#xff1a;
阅读更多...
002 Linux 权限

002 Linux 权限

前言 本文将会向您介绍关于linux权限方面的内容&#xff0c;包括文件类型&#xff0c;如何切换用户、基本权限、粘滞位等等 Linux具体的用户 超级用户&#xff1a;可以再linux系统下做任何事情&#xff0c;不受限制 普通用户&#xff1a;在linux下做有限的事情。 超级用户的…
阅读更多...
安卓预制权限添加规则

安卓预制权限添加规则

android:protectionLevel 可以在 android/frameworks/base/core/res/AndroidManifest.xml查询 signature|preinstalled 加在 这个文件里 privapp-permissions-xx.xml dangerous 加在 default-permissions/default-mega-permissions.xml normal 不需要加 不存在两个文件都加…
阅读更多...
【LeetCode-中等题】18. 四数之和

【LeetCode-中等题】18. 四数之和

文章目录 题目方法一&#xff1a;双指针&#xff08;定2动2&#xff09; 题目 方法一&#xff1a;双指针&#xff08;定2动2&#xff09; 这题可以参考【LeetCode-中等题】15. 三数之和 区别在于&#xff0c;三数之和只需要用一个for循环定住一个数&#xff0c;然后设置两个前…
阅读更多...
类和对象（3）

类和对象（3）

文章目录 1.回顾上节2. 拷贝构造3. 运算符重载&#xff08;非常重要&#xff09;4. 赋值运算符重载 1.回顾上节 默认成员函数&#xff1a;我们不写&#xff0c;编译器自动生成。我们不写&#xff0c;编译器不会自动生成 默认生成构造和析构&#xff1a; 对于内置类型不做处理对…
阅读更多...
mysql远程连接失败

mysql远程连接失败

先上结论&#xff0c;只提出最容易忽略的地方 服务器是阿里云、腾讯云等平台&#xff0c;平台本身自带的防火墙没有开启iptables规则中禁用了3306&#xff0c;即使你根本没有启用iptables服务 第二条是最离谱的 从这里可以看到&#xff0c;我服务器并未启用 iptables 服务 但…
阅读更多...
应用在电子体温计中的国产温度传感芯片

应用在电子体温计中的国产温度传感芯片

电子体温计由温度传感芯片&#xff0c;液晶显示器&#xff0c;纽扣电池&#xff0c;专用集成电路及其他电子元器件组成。能快速准确地测量人体体温&#xff0c;与传统的水银玻璃体温计相比&#xff0c;具有读数方便&#xff0c;测量时间短&#xff0c;测量精度高&#xff0c;能…
阅读更多...
如何分析Apple搜索广告效果

如何分析Apple搜索广告效果

Apple搜索广告提供了一系列指标&#xff0c;报告和功能&#xff0c;可为广告效果、用户行为和关键词有效性提供有价值的见解。通过利用此工具&#xff0c;广告商可以更深入地了解他们的广告活动&#xff0c;优化他们的策略&#xff0c;并取得更好的结果。 1、在研究数据之前&a…
阅读更多...
深入解析NLP情感分析技术：从篇章到属性

深入解析NLP情感分析技术：从篇章到属性

目录 1. 情感分析概述1.1 什么是情感分析&#xff1f;- 情感分析的定义- 情感分析的应用领域 1.2 为什么情感分析如此重要&#xff1f;- 企业和研究的应用- 社交媒体和公共意见的影响 2. 篇章级情感分析2.1 技术概览- 文本分类的基本概念- 机器学习与深度学习方法- 词嵌入的力量…
阅读更多...
webStorm内存溢出问题

webStorm内存溢出问题

手动启动vue项目正常运行&#xff0c;修改部分内容保存后会自动重新run一下&#xff0c; 这个时候就报错内存溢出&#xff0c;然后很悲伤的需要再手动重启一下。 每个人的情况不同&#xff0c;下面几种方法可以都试一试。 1、修改help里的内存配置 &#xff08;图片只参考修改…
阅读更多...
puttygen工具ppk文件版本配置

puttygen工具ppk文件版本配置

有时一些程序要用到ppk密钥文件&#xff0c;如果用puttygen去生成的话&#xff0c;ppk文件版本是可以配置的&#xff0c;有版本2、版本3&#xff0c;如果出现密钥文件无效&#xff0c;可以试一下选择不用的文件版本。 配置位置&#xff1a;打开puttygen-选择菜单栏Key-选择Para…
阅读更多...
差分+差分矩阵（更适合新手宝宝体质）

差分+差分矩阵（更适合新手宝宝体质）

快速掌握差分以及差分矩阵 文章目录 快速掌握差分以及差分矩阵前言差分差分的定义【官方解释】差分自定义【跟前缀和放在一起理解】差分数组的应用 题目描述差分矩阵【与前缀和矩阵进行比较】差分矩阵定义【官方解释】自定义修改操作【跟前缀和对比】 题目描述代码 前言 之前我…
阅读更多...
微信小程序——小程序的API介绍

微信小程序——小程序的API介绍

小程序的宿主环境-API 1.小程序API概述 小程序中的API是由宿主环境提供的&#xff0c;通过这些丰富的小程序API&#xff0c;开发者可以方便的调用微信提供的能力&#xff0c;例如&#xff1a;获取用户信息&#xff0c;本地存储&#xff0c;支付功能等。 2.小程序API的3大分类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023