element plus css强制修改

LZQ <=小氣鬼=>

已于 2024-04-02 13:56:16 修改

阅读量262

点赞数 4

文章标签： css vue.js elementui

于 2024-03-27 16:10:26 首次发布

本文链接：https://blog.csdn.net/id_EquinoxFlower/article/details/137080859

版权

本文介绍了如何在ElementPlus组件中，对表格的背景颜色、边框以及下拉框的样式进行自定义修改，包括背景色、文字颜色和宽度设置。

摘要由CSDN通过智能技术生成

element plus 表格样式的强制修改

  <div class="Sliewe">
                <el-table border size="small" row-key="id" :data="list">
                    <el-table-column label="告警时间" align="center" prop="score">
                    </el-table-column>
                    <el-table-column label="告警级别" align="center" prop="score">
                    </el-table-column>
                    <el-table-column label="告警设备" align="center" prop="score">
                    </el-table-column>
                    <el-table-column label="告警信息" align="center" prop="score">
                    </el-table-column>
                </el-table>
            </div>

.Sliewe {
    .el-table {
        background-color: #fd0a0a00 !important;
        --el-table-border-color: #ffffff00;

        .el-table__cell,
        .el-table__row,
        .el-table__header-wrapper,
        .el-table__header,
        colgroup,
        thead,
        th,
        thead,
        .el-table__header {
            color: black;
            border: none !important;
            background-color: #fd0a0a00 !important;
        }

    }

    .el-table tr {
        color: black;
        border: none !important;
        background-color: #25b7f646 !important;

        .cell {
            color: #45BCFF !important;
        }
    }

    .el-table .el-table__row {
        .cell {
            color: #FFFFFF !important;
        }
        background: rgba(229, 219, 193, 0.1) !important;
    }

    .el-table--border::before,
    .el-table--border .el-table__inner-wrapper::after,
    .el-table--border .el-table__inner-wrapper::after,
    .el-table--border::after,
    .el-table--border::before,
    .el-table__inner-wrapper::before {
        position: absolute !important;
        background-color: #ffffff00 !important;
    }

}

element plus Select 下拉框样式强制修改

 <template>
    <div class="lsiier">
       <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
            <el-option
                 v-for="item in options" 
                :key="item.value"
                :label="item.label"
                :value="item.value" />
          </el-select>
   </div>

</template>
.lsiier {

    text-align: right;
    margin-top: 1rem;

    .el-input__inner {
        width: 460px !important;
        height: 3rem !important;
        background: linear-gradient(90deg, rgba(24, 46, 66, 0.9) 45%, rgba(28, 40, 51, 0.7) 92%, rgba(45, 53, 55, 0) 100%) !important;
        border-radius: 10px 0px 10px 0px;
        border: none !important;
    }

}

.el-select-dropdown__empty,
.el-select-dropdown,
.el-popper,
.is-pure,
.is-light,
.el-select__popper {
    background: rgba(24, 46, 66, 0.9) 45% !important;
    border: none !important;
}