element修改el-table中背景色和border为渐变色

先看效果图

row-class-name方法 去设置每行的class名字

 

        // 返回的是每行的class类名

         tableRowClassName() {

                    return 'backgriund'

        }

 css 样式

这里为啥要用  after    
当时在写背景和下边框渐变的时候我自己写了一个空白 div 去测试了 ，结果都可以，但是不知道为啥用到table 中背景色可以，但是border不行，所以才会用 after   去实现

// 必加
 .el-table__body {
     border-collapse: collapse;
 }

 .backgriund {
             //  背景色渐变
            background: linear-gradient(90deg, rgba(17, 181, 253, 0) 0%, rgba(17, 181, 253, 0.01) 20%, rgba(17, 181, 253, 0.1) 60%, rgba(17, 181, 253, 0) 100%) ;

            // 下边框渐变
            &::after {
                position: absolute;
                content: '';
                left: 0;
                width: 100%;
                border-bottom: 1px solid;
                //  如果设置 左右 边框的话 要改为 180 
                border-image: linear-gradient(90deg, rgba(25, 162, 255, 0) 10%, rgba(20, 125, 202, 1) 50%, rgba(25, 162, 255, 0) 90%) 2 2 2 2;
            }

        }