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

先看效果图

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

? <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

? ? ? ? // 返回的是每行的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;
            }

        }