el-table 列背景色渐变

最初的想法是,给每一行添加背景色,逐行递减透明度,发现结果比较突兀,效果如下:

如果有需要这种样式的,代码如下:

html 复制代码
<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 以此类推。

计算方法:透明度 / 通过总数据量(行数)= 每行透明间隔 再每行递减即可。

最终代码

html 复制代码
<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>
相关推荐
mCell12 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip12 小时前
Node.js 子进程:child_process
前端·javascript
excel15 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙19 小时前
[译] Composition in CSS
前端·css
白水清风19 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix19 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780019 小时前
new、原型和原型链浅析
前端·javascript