修改element-ui默认样式_el-form-item 样式

目录

1.使用::v-deep给当前.vue组件修改element-ui默认样式

2.使用内联样式修改element-ui默认样式

 3.使用class修改element-ui某一默认样式

---

 

1.使用::v-deep给当前.vue组件修改element-ui默认样式

例子1：更换上传的样式 

 

代码如下：

注意：要加上scoped才只在当前组件使用，而不影响其他组件

<style lang="scss" scoped>
    ::v-deep .el-icon-upload:before {
        content: url('../static/test.png');
    }
</style>

2.使用内联样式修改element-ui默认样式

例子：

 

代码如下：

<div style="line-height: 1.5rem;" class="el-upload__text">点击或拖拽单个文件到此处上传
    <div style="font-size: 0.75rem;"
        class="el-upload__tip" 
        slot="tip">支持文件格式: MP4
    </div>
</div>

 3.使用class修改element-ui某一默认样式

例子：改变el-form-item的某一个label的位置

 

代码如下：

//class="upload"
<el-form-item class="upload" label="动植物视频文件：" label-position="top">
    <el-upload style="margin-left: 75px;" class="upload-demo upload-box" drag
       action="https://jsonplaceholder.typicode.com/posts/" multiple>
        <i class="el-icon-upload"></i>
        <div style="line-height: 1.5rem;" class="el-upload__text">点击或拖拽单个文件到此处上传
            <div style="font-size: 0.75rem;" class="el-upload__tip" slot="tip">支持文件格式: MP4</div>
        </div>
    </el-upload>
</el-form-item>
 
 
 
.upload ::v-deep .el-form-item__label{
    float: none;
    margin-left: 3.5rem;
}

完整代码：

<template>
    <div class="content">
        <el-form ref="form" :model="ResourceForm" label-width="150px">
            <el-form-item label="实验总时长：">
                <el-cascader v-model="ResourceForm.totalTime" :options="options" placeholder="请选择"></el-cascader>
            </el-form-item>
            <el-form-item class="upload" label="动植物视频文件：" label-position="top">
                <el-upload style="margin-left: 75px;" class="upload-demo upload-box" drag
                    action="https://jsonplaceholder.typicode.com/posts/" multiple>
                    <i class="el-icon-upload"></i>
                    <div style="line-height: 1.5rem;" class="el-upload__text">点击或拖拽单个文件到此处上传
                        <div style="font-size: 0.75rem;" class="el-upload__tip" slot="tip">支持文件格式: MP4</div>
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
</template>
 
<script>
    export default {
        name: 'TestTime',
        data() {
            return {
                ResourceForm: {
                    totalTime: [],
                },
            };
        },
        methods: {
        }
    }
</script>
 
<style lang="scss" scoped>
    .upload ::v-deep .el-form-item__label{
        float: none;
        margin-left: 3.5rem;
        
    }
 
    ::v-deep .el-icon-upload:before {
        content: url('../static/test.png');
    }
 
    .content {
        margin-top: 1rem;
    }
 
</style>