我要投稿

elementui局部样式修改-学习分享——浅谈改变Element-ui组件默认css样式

bendan520 elementui

2023-12-03 0 3,082 百度已收录

进不了网站？换个网络试试！

Element-ui是一个基于Vue.js的UI组件库。它提供了功能强大、易于使用且实用的UI组件，使开发人员能够快速高效地创建现代Web应用程序。是目前后端工程师最常用的组件库。 Element-ui足够精致和简单elementui局部样式修改，而根据不同的需求，我们经常要对Element-ui的CSS样式进行更改，而更改其CSS样式也是一个棘手的问题。

这里，我们分享3种改变Element-ui默认样式的方法。

01.参考Element-ui官方API文档

对于某些组件，官网提供了更改样式的API。我们可以根据API指定组件的样式。

优点：官方，保证改不会出错。

缺点：支持的组件较少，支持的样式不够全面。

02..vue 文件的更改

这些方法都是给vue文件添加新的样式标签。

用于更改某些特定组件样式，但不会全局应用。

例如，某个.vue文件需要非常定制的表格组件，而其他文件则需要使用原始样式。

这样，我们最好的解决方案就是在.vue文件中添加新的样式标签。

在此更改表格的默认样式。

<template>
 <div class="my-class">
            <el-table>
            </el-table>
        </div>
</template>

<script>
</script>

<style scoped="scoped" lang="scss">
</style>

<style>
 
    /* 修改Element-ui中table组件的样式 */

    .my-class__expand-column .cell {
            display: none;
}

  // 修改 Element-ui 中 table 组件的样式
    .my-class .el-table tbody tr:hover>td {
            cursor: pointer;
    }

  // 在 el-form 元素中添加一个 el-form-item 元素，并在该元素中添加一个 el-input__inner 元素，设置该元素的 focus 样式  
    .my-class .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }

   
</style>

必须添加一个唯一的作用域elementui局部样式修改，就是最里面的类名，比如上面的my-class。它限制当前表格的样式更改仅在该类及其子元素中生效。否则，表格的样式仍然会被全局覆盖。

还可以将class替换为id，这样可以保证类名不会冲突。

<template>
 <div id="my-class">
            <el-table>
            </el-table>
        </div>
</template>

<style>
 
    /* 修改Element-ui中table组件的样式 */

    #my-class__expand-column .cell {
            display: none;
    }

    #my-class .el-table tbody tr:hover>td {
            cursor: pointer;
    }


    #my-class .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }

  
</style>

这些方法的用处在于我们可以动态绑定各个类。

<template>
 <div id="my-class">
            <el-table :class="my-table">
    
        
            </el-table>
        </div>
</template>

<style>
 
    /* 修改Element-ui中table组件的样式 */

    #my-class__expand-column .cell {
            display: none;
    }

    #my-class .el-table tbody tr:hover>td {
            cursor: pointer;
    }


    #my-class .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }

    #my-class .my-table {
        /* 在 id 为"my-class"的 div 中添加.my-table 类，用于指定 el-table 组件的样式 */  
    border-collapse: collapse;  
    width: 100%;  
    }

</style>

优势：

(1)灵活定制、动态绑定；

(2)全局不会改变。

缺点：您需要指定唯一的类范围。

03.改变组件的样式

对于很少使用但需要动态绑定属性的单个组件，我们可以使用这种方法，但不保证它一定有效。

比如对于这个组件，我们可能需要给它绑定一些动态的样式属性，这样我们就可以给它绑定样式。

 <el-backtop target="" :bottom="100" >
   <div :style="{
             height: 100%;
             width: _width;
             background-color: #f2f5f6;
             box-shadow: 0 0 6px rgba(0,0,0, .12);
             text-align: center;
             line-height: 40px;
             color: #1989fa;
             border-radius: 50%;
           }">

                        <i class="el-icon-caret-top"></i>
                </div>
        </el-backtop>
        
        
        data() {
           
         return{
           _width: 50%
         }
        }