el-table 列背景色渐变

最新推荐文章于 2024-05-23 19:16:52 发布

ZionHH

最新推荐文章于 2024-05-23 19:16:52 发布

阅读量982

点赞数 1

分类专栏： Element UI 文章标签： vue.js 前端 ElementUI el-table

本文链接：https://blog.csdn.net/z291493823/article/details/132897299

版权

Element UI 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

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

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