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>
相关推荐
Mr_Xuhhh7 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端