element-plus table表格换行变色以及部分el自带样式的修改

element-plus table表格换行变色

 次处为表头颜色修改

 :header-cell-style="{ background: '#0B3357' }" 

在el-table上加
:row-class-name="tableRowClassName"

// tableRowClassName({ row, rowIndex }) {
//       if (rowIndex % 2 == 0) {
//         return "";
//       } else {
//         return "statistics-warning-row";
//       }
//     }
interface changeRowParameter{
    row: any,
    rowIndex: number
}
const tableRowClassName = ({ row, rowIndex }:changeRowParameter) => {
    if (rowIndex % 2 == 0) {
        return "";
    } else {
        return "statistics-warning-row";
    }
}
在style中添加

    // 单行显示的颜色
        .el-table__row.statistics-warning-row {
       background: #092B49;
    }

 // 清除table表格的下边线    

     --el-table-border-color: none;

修改element-ui自带的input边框颜色

 // 日期背景色和边框颜色
                    :deep(.date-picker) {
                        width: vw(138);
                        margin-right: vw(20);

                        // background-color: red;
                        .el-input__wrapper {
                            width: vw(140);
                            background: rgba(214, 21, 21, 0) !important;
                            //rgba(214, 21, 21, 0)
                            border: 1px solid #214a8f;
                            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
                        }
                    }

select选择框

.select-left {
    margin-left: vw(5);
    .el-input__wrapper {
        width: vw(160);
        background: rgba(214, 21, 21, 0) !important;
        //rgba(214, 21, 21, 0)
        border: 1px solid #214a8f;
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    }
}

若不生效尝试

<style lang="scss">
 .el-input__wrapper {
    width: vw(140);
    background: rgba(214, 21, 21, 0) !important;
    //rgba(214, 21, 21, 0)
    border: 1px solid #214a8f;
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
}
</style>

或者加穿透效果

vue2

中 /deep/

 vue3中 :deep(.class)

代码如下所示

  :deep(.el-input__wrapper) {
                            width: vw(140);
                            background: rgba(214, 21, 21, 0) !important;
                            //rgba(214, 21, 21, 0)
                            border: 1px solid #214a8f;
                            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
                        }

修改el-input textarea自带的样式

.el-textarea__inner, .el-input__inner {
	background-color: transparent !important;
	color: #fff !important;
	...
}

修改input框颜色

  //下拉框边框颜色
:deep(.el-input__wrapper) {
    background-color: transparent;
    box-shadow: 0 0 0 vw(1) #397cf4 inset !important;
}