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>
相关推荐
LFly_ice9 分钟前
学习React-10-useTransition
前端·学习·react.js
咔咔一顿操作10 分钟前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
知识分享小能手14 分钟前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇19 分钟前
Nue.js深度解析:极简主义前端框架的革新实践
前端·node.js
小徐_233322 分钟前
uni-app 也能使用 App.vue?wot-starter 是这样实现的!
前端·uni-app
入秋24 分钟前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
深圳外环高速24 分钟前
企业微信和页面离开事件
前端
召摇26 分钟前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
Abadbeginning28 分钟前
FastSoyAdmin centos7云服务器+宝塔部署
vue.js·后端·python
哆啦A梦158840 分钟前
uniapp分包实现
前端·vue.js·uni-app·vue3