el-table 列背景色渐变

2023-09-15 11:01:03

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

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

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

在这里插入图片描述

更多推荐

SPA首屏加载速度慢

什么是首屏加载首屏时间（FirstContentfulPaint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节关于计算首屏时间通过DOMContentLoad或者performance来计算出首屏时间

亚马逊登山扣CPC认证ASTMF1774测试和UIAA121测试报告申请

一.什么是登山扣答:登山扣是扣子的一种，顾名思义其就是用来在登山的时候配合绳子起到一个承重悬挂的作用.采用铝吕合金、铁或者是不锈钢等材料制作而成的一种登山工具之一。其形状多样，比较常见的是椭圆形和圆形的，除此之外还有长方形、三角形等样式的登山扣。铝合金登山扣由于质地较轻所以重量也比较交轻，所以携带方便，其耐腐蚀性和防锈

算法通关村-----LRU的设计与实现

LRU缓存问题描述请你设计并实现一个满足LRU(最近最少使用)缓存约束的数据结构。实现LRUCache类：LRUCache(intcapacity)以正整数作为容量capacity初始化LRU缓存。intget(intkey)如果关键字key存在于缓存中，则返回关键字的值，否则返回-1。voidput(intkey,i

YashanDB第三期YCA认证培训圆满结束

9月11日，由YashanDB举办的“第三期YCA认证培训”圆满结束。本次培训吸引了超过110名学员报名，华润数字科技有限公司、北京中亦安图科技股份有限公司、迪思杰(北京)数据管理技术有限公司等多家合作伙伴积极参与。经过7天的学习，在9月6日举行的YCA认证考试中，77名学员获得“YashanDB数据库V22.2认证管

Linux命令行操作：使用“more“命令进行分页显示

文章目录1.引言1.1介绍Linux操作系统和命令行界面什么是Linux操作系统？为什么命令行界面在Linux中如此重要？1.2介绍Linux中的分页显示命令分页显示命令的作用与意义不同分页显示命令的比较2."more"命令的基本用法2.1安装和启动"more"命令如何安装"more"命令？如何从命令行中启动"more

golang使用高阶函数优化业务功能

业务描述两个接口（新增Tag和更新Tag），在业务层均需要添加两个校验，校验Tag信息是否重复和Tag的数据中的编码是否重复。基本实现方式对应的增加两个校验的函数/方法，在接口实现中依次调用两个函数/方法进行校验。优缺点实现简单；但重复代码多，后期再增加其他校验，扩展性较差。高阶函数方式一方式因为业务方法参数相同，业务

FOXBORO FBM233 P0926GX控制脉冲模块

FOXBOROFBM233P0926GX是一种控制脉冲模块，通常用于工业自动化和控制系统中。这个模块的主要功能是生成和控制脉冲信号，以用于执行特定的操作或控制过程。以下是可能适用于FOXBOROFBM233P0926GX控制脉冲模块的一些常见特点：脉冲生成：FBM233P0926GX模块通常能够生成可控的脉冲信号，包括

界面组件DevExpress WinForms v23.1 - 富文本编辑器等功能升级

DevExpressWinForms拥有180+组件和UI库，能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！DevExpressWinForm控件已正

Vue3_vite

目录使用Vue-cli创建使用vite创建CompositionAPI组合APIsetup执行时机setup的参数ref函数reactive函数Vue3.0中的响应式原理Vue2的响应式实现原理Vue3的响应式实现原理通过Proxy（代理）:拦截对象中任意属性的变化，包括属性值的读写，属性的添加，属性的删除。通过Ref

Linux网络编程

一.协议1.1什么是协议从应用的角度出发，协议可理解为“规则”，是数据传输和数据的解释的规则。假设，A、B双方欲传输文件。规定:第一次，传输文件名，接收方接收到文件名，应答OK给传输方;第二次，发送文件的尺寸，接收方接牧到该数据再次应答一个OK;第三次．传输文件内容。同样．接收方接收数据完成后应答OK表示文件内容接收成

【HCIE】04.网络安全技术

端口隔离在同一VLAN中可以隔离二层与三层通信，让同VLAN内的设备可以通信或者不可以通信。定义一个端口隔离组，在一个组内无法互访，不在一个组里面可以进行互访port-isolateenablegroup1//使能端口隔离功能port-isolatemdoeall//全局模式实现二层隔离，三层互访intg0/0/1po

热文推荐
  1. Redis Part1

    单体架构：一台Web服务器、一台数据库服务器。回顾，关系型数据库：基于二维表来存储数据的数据库就是关系型数据库。MySQL跟Redis的区别：MySQL是关系型数据库，它是基于表来存储数据的，MySQL数据是写在磁盘的，它是跟磁盘进行交互的；Redis是非关系型数据库，它是把数据存储在内存当中的，是跟内存进行交互的。M

  2. Go基础语法：数组

    6数组6.1数组的定义数组在定义时就需要声明其元素数量和类型：//T即元素类型var数组变量名[元素数量]T如：vara[5]int.数组的长度必须是常量，并且长度是数组类型的一部分，一旦定义，长度不能变。所以，[5]int和[10]int是不同的类型。packagemainimport"fmt"funcmain(){

  3. 功能基础篇3——Python中的输入输出、文件读写、序列化

    IO文件读写openopen()为内置函数，用于读写文件mode读写x，create，创建，文件存在报错，可写不可读r，read，读入，默认读写方式，文件不存在报错，可读不可写w，write，写入，文件不存在会创建文件，存在清空文件内容，可写不可读a，append，追加，文件不存在会创建文件，光标移至文件末尾，可写不可

  4. CentOS常用命令

    一、yum命令1.1列表源服务器软件包yumlist//列出yum源服务器上所有的软件包，太多了，一般不单独使用，大多数要配合管道grep使用yumlistopenssl*//列出yum源服务器上所有以openssl开头的软件包yumlist|grepopenssl//列出yum源服务器上所有包含openssl的软件包

  5. 实时可追溯性和事后可追溯性

    在当今的世界里，成功的组织都将其创新和复杂产品开发流程建立在跨多个工作流的互联数据上。为此，他们需要收集利益相关者的想法以构建系统架构，管理高级需求以创建详细的用户故事，并实施验证程序以检查问题。同时，在满足标准规定并在当前的市场环境中保持竞争力的过程中，与各利益相关者的协作需要深度的追踪。许多行业标准都要求有需求追踪

  6. 记一次 .NET 某仪器测量系统 CPU爆高分析

    一：背景1.讲故事最近也挺奇怪，看到了两起CPU爆高的案例，且诱因也是一致的，觉得有一些代表性，合并分享出来帮助大家来避坑吧，闲话不多说，直接上windbg分析。二：WinDbg分析1.CPU真的爆高吗这里要提醒一下，别人说爆高不一定真的就是爆高，我们一定要拿数据说话，可以用!tp观察下。0:000>!tplogSta

  7. 关于ITSS认证资质整改和降级

    最近来我公司咨询ITSS年审换证的企业比较多，很多企业伙伴的ITSS信息技术服务运维符合性证书2023年到期将面临换证，很多企业觉得拿证三年了都没有问题，换证随便糊弄一下就行了。但是在年审换证再评估中会遇到很多问题，就一些问题我们武汉好地科技小编整理出了一套年审换证再评估相关注意事项。ITSS认证再评估相关事项：1．持

  8. ELK日志分析系统

    日志服务器提高安全性集中存放日志缺陷：对日志的分析困难ELK日志分析系统ElasticsearchLogstashKibana介绍ELK日志分析系统是一套完整的日志集中处理解决方案，基于Elasticsearch、Logstash、Kibana三种开源工具进行日志收集、存储和可视化elk可以帮助用户快速定位和分析应用程

  9. Vue3函数式编程

    文章目录前言一、三种编程风格1.template2.jsx/tsx3.函数式编写风格二、函数式编程1.使用场景2.参数3.例子3.render渲染函数总结前言本文主要记录vue3中的函数式编程以及其他编程风格的简介一、三种编程风格1.templateVue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的