el-table 列背景色渐变

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

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

<template><div><el-table:data="tableData":header-cell-style="headerCellStyle":cell-style="cellStyle"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><el-table-columnprop="mobile"label="电话"></el-table-column><el-table-columnprop="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 } = thisconst styleObj = {backgroundColor: `rgb(${colors[columnIndex]})`,color: '#333'}return styleObj},cellStyle ({ row, column, rowIndex, columnIndex }) {const { tableData, colors } = thisconst dataLength = tableData.length // 数据长度const gradientNum = dataLength + 1 // 渐变数量加1const startOpacity = 0.7 // 起始透明度const interval = startOpacity / gradientNum // 计算每行的渐变间隔const opacity = startOpacity - rowIndex * intervalconst 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-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><el-table-columnprop="mobile"label="电话"></el-table-column><el-table-columnprop="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 } = thisconst styleObj = {backgroundColor: `rgb(${colors[columnIndex]})`,color: '#333'}return styleObj},cellStyle ({ row, column, rowIndex, columnIndex }) {const { tableData, colors } = thisconst dataLength = tableData.length // 数据长度const gradientNum = dataLength + 1 // 渐变数量加1const startOpacity = 0.7 // 起始透明度const interval = startOpacity / gradientNum // 计算每行的渐变间隔const opacity1 = startOpacity - rowIndex * intervalconst opacity2 = startOpacity - interval - rowIndex * intervalconst styleObj = {backgroundImage: `linear-gradient(to bottom, rgba(${colors[columnIndex]}, ${opacity1}), rgba(${colors[columnIndex]}, ${opacity2}))`,border: 'none'}return styleObj}}
}
</script>