我们在vue中使用Element库的时候，vue组件中样式的scoped会导致我们无法修改控件的样式。

<style scoped>
</style>

解决方法是

新建样式，找到Element控件中的样式，并进行修改，例如

<style scoped>
   //不起作用
   .el-cascader-menu {
    min-width: 150px;
    max-width: 150px;
    box-sizing: border-box;
    color: #606266;
    border-right: solid 1px #E4E7ED;
  }
</style>

<style>
  //起作用
   .el-cascader-menu {
    min-width: 150px;
    max-width: 150px;
    box-sizing: border-box;
    color: #606266;
    border-right: solid 1px #E4E7ED;
  }

</style>

例如我在项目中使用了以下控件

<el-cascader-panel
              ref="cascader"
              @change="handleCheckedChange"
              :options="options"
              v-model="checkedNodeValue"
              :props="props">
 </el-cascader-panel>

因为在控件的上面添加了几个标题，标题要跟展开的每一级宽度对齐时，则需要在浏览器中打开调试模式，找到el-cascader-panel的样式，并进行修改，样式修改如下

<style scoped>
  
  .el-cascader-panel {
    display: flex;
    border-radius: 0px;  //去掉圆角
    font-size: 14px;
  }

</style>

<style>

  .el-cascader-menu {
    min-width: 150px; //修改item的最大最小宽度
    max-width: 150px;
    box-sizing: border-box;
    color: #606266;
    border-right: solid 1px #E4E7ED;
  }

  /*.el-scrollbar {*/
  /*  overflow: hidden;*/
  /*  position: relative;*/
  /*}*/

  .el-cascader-menu__wrap {
    height: 100%;  //高度占满
  }
  .el-scrollbar__wrap {
    overflow-y: scroll;   //修改横向不加滑动条
    overflow-x: hidden;
    height: 100%;
  }

  /*.el-cascader-menu__list {*/
  /*  position: relative;*/
  /*  min-height: 100%;*/
  /*  margin: 0;*/
  /*  padding: 6px 0;*/
  /*  list-style: none;*/
  /*  box-sizing: border-box;*/
  /*}*/

  /*.el-cascader-node {*/
  /*  position: relative;*/
  /*  display: flex;*/
  /*  align-items: center;*/
  /*  padding: 0 30px 0 20px;*/
  /*  height: 34px;*/
  /*  line-height: 34px;*/
  /*  outline: 0;*/
  /*}*/

  .el-cascader-node__label {
    /*flex: 1;*/ //修改label宽度根据内容大小填充
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-cascader-node__postfix {
    /* position: absolute; */ //修改右侧箭头的位置
    right: 10px;
  }
</style>

修改后如下效果

修改后.PNG

未修改样式前的效果

未修改前.png

上面标题的样式比较简单

<div class="left-top">
            <div class="title-item">
              <span style="font-weight: bold">一级标签</span>
            </div>

            <div class="title-item">
              <span style="font-weight: bold">二级标签</span>
            </div>
          </div>

.left-top{
    display: flex;
  }

  .title-item{
    flex:1;
    font-size: 14px;
    background: #ECF0F5;
    height: 50px;
    line-height: 50px;
    margin-right: 0.5px;
  }

修改Upload的样式

Upload的原本的样式如下

upload原本样式.PNG

如果要去掉边框虚线、修改上传upload的宽高怎么办？直接在el-upload上通过style=""修改宽高
是没有效果的。

通过调试模式找到，el-upload原本的样式，并放在<style></style>中，如果你使用了<style scoped></style>没关系，新建一个<style></style>与<style scoped></style>并行就可以。

.el-upload-dragger {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 1000px; //修改宽高
    height:303px;
    border: 0px solid #00000000;  //设置虚线为透明色，这样虚线边框就消失了
  }

修改上传的灰色图标怎么办？
将原来的 <i class="el-icon-upload"></i>删除
然后自己添加图片<img width="66px" height="53px" src="@/assets/img/mark/upload.png" />就可以了

                <div style="width: 100%;height: 100%;border:1px dashed #0083FF; border-radius:6px">

                  <div style="padding-left: 10px;padding-top: 10px;padding-bottom: 10px">
                    <div>
                      <span style="font-size: 16px;color:#0083FF">①</span><a style="font-size: 14px;" @click="dowloadTemplate">下载EXCEL</a><span style="font-size: 14px;color: #999999">根据示例文件格式填写</span>
                    </div>
                    <div style="margin-top: 5px">
                      <span style="font-size: 16px;color: #0083FF">②</span><span style="font-size: 14px;color: #333333">上传文件进行查询</span>
                    </div>
                  </div>

                  <el-upload
                    style="margin-left: 35px"
                    drag
                    action="#"
                    :file-list="fileList"
                    :auto-upload="false"
                    :on-exceed="handleExceed"
                    :limit="1"
                    :on-remove="removeFile"
                    :on-error="uploadError"
                    :on-change="uploadChange"
                    :before-remove="beforeRemove"
                    accept=".xls, .xlsx"
                  >
                    <img width="66px" height="53px" src="@/assets/img/mark/upload.png" />
                    <div style="margin-top:20px;margin-bottom: 20px"><span style="color: #999999;font-size: 14px;">点击或将文件（xsl、xslx）,拖拽到这里上传</span></div>
                    <div><el-button size="small" type="primary">点击上传</el-button></div>

                  </el-upload>
                </div>

修改后效果

修改后效果.PNG

修改表格项的提示文字

<el-table-column show-overflow-tooltip label="序号" width="60">

添加了 show-overflow-tooltip后，当鼠标移动到上面是会出现悬浮的内容提示，但内容太多时会超出屏幕可以修改一下样式的宽度，方法如下：

<style>
  .el-tooltip__popper {
    max-width: 60%;
  }
</style>

修改Element Button按钮的背景色

<style scoped>
    .el-button--primary:active {
        background: #22c1e6;
        border-color: #22c1e6;
    }

    .el-button--primary:hover {
        background: #22c1e6;
        border-color: #22c1e6;
    }


    .el-button--primary {
        background-color: #01A0C6;
        border-color: #01A0C6;
    }
</style>

注意此处使用的按钮类型为primary

<el-button class="right_bottom" type="primary">确定</el-button>

去掉Elment Input的边框

<el-input
class="textarea"
          type="textarea"
           maxlength="200"
            :rows="4"
            autofocus
            placeholder="请输入"
             v-model="textarea">
</el-input>
                                

样式如下，注意el-input需要添加 class="textarea"
<style scoped>
    .textarea >>> .el-textarea__inner{
        border: none;
        resize: none;
    }
</style>

单选按钮的样式修改

默认的单选样式如下

image.png

修改成如下样式

image.png
示例如下

<template>
    <div class="screen-radio">
        <el-radio-group v-model="leaveListVal" size="mini">
            <el-radio
                    v-for="item in levelList"
                    :key="item.label"
                    :label="item.value"
                    :value="item.value"
            >{{ item.label }}</el-radio
            >
        </el-radio-group>
    </div>
</template>
<script>
    export default {
        name: "",
        components: {},
        data() {
            return {
                leaveListVal:'1',
                levelList: [
                    {
                        value: '0',
                        label: '全部',
                    },
                    {
                        value: '1',
                        label: '国家',
                    },
                    {
                        value: '2',
                        label: '省级',
                    },
                    {
                        value: '3',
                        label: '市级',
                    },
                    {
                        value: '4',
                        label: '开发区',
                    }
                ],
            };
        },
    }
</script>

<style scoped lang="scss">
    .screen-radio /deep/ {
        float: left;
        padding-left: 10px;
        margin-top: 30px;
    .el-radio {
        margin-right: 0px;
    }
    .el-radio--mini.is-bordered {
        padding: 6px 8px 0 10px;
    }
    .el-radio__input {
        display: none;
    }
    .el-radio__original {
        font-size: 14px;
    }
    .el-radio__label {
        padding: 3px 10px;
        font-size: 14px;
    }
    .el-radio.is-bordered {
        border: none;
    }
    .el-radio__input.is-checked + .el-radio__label {
        background: #2953cf;
        color: #fff;
        padding: 3px 10px;
        border-radius: 3px;
        opacity: 0.6;
        font-weight: 100;
    }
  }
</style>

修改折叠面板

普通折叠面板样式如下

8.gif

如果要修改成以下样式如何修改

9.gif

示例代码如下：

<template>
    <div class="collapse-cont">
        <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(item, i) in list" :key="i" :name="i + 1">
                <template slot="title">
                    <div class="_t">{{ item.name }}</div>
                    <div class="_p">
                        品种数量(<span>{{ item.level }}</span
                    >)
                    </div>
                    <div class="_z">
                        正在进行(<span class="blue">{{ item.reportingNum }}</span
                    >)
                    </div>
                </template>
                <div class="table-item-tit">
                    <div class="items40">品种名称</div>
                    <div class="items20">我的级别</div>
                    <div class="items20">发布部门</div>
                    <div class="items20"><span class="fr pr15">操作</span></div>
                </div>
                <div class="table-item-cont">
                    <div class="items40 pl10">{{ item.typeName }}</div>
                    <div class="items20">{{ item.level }}</div>
                    <div class="items20">{{ item.publishUnit }}</div>
                    <div class="items20">
                        <router-link  :to="{ name: 'xxxx' }"
                        ><em class="red cp fr fwb pr15">查看</em></router-link>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
    export default {
        name: "",
        components: {},
        data() {
            return {
            activeNames: ['1'],
            list:[
                {
                    id: "74465699cbd92140e4fb",
                    interpret: "<p>123123</p>",
                    latelyAsk: null,
                    level: "2",
                    levelName: null,
                    name: "测试1",
                    platformCash: "1",
                    policyNumber: "1231",
                    publishTime: "2022-03-25 17:55:06",
                    publishUnit: "123123",
                    reportingNum: 1,
                    startTime: "2022-03-10",
                    status: "0",
                    statusDesc: "有效",
                    tagInfoList: null,
                    type: "lala_policy",
                    typeName: "优惠政策"},
                {
                    id: "7446562140e4fb",
                    interpret: "<p>123123</p>",
                    latelyAsk: null,
                    level: "2",
                    levelName: null,
                    name: "测试2",
                    platformCash: "1",
                    policyNumber: "1231",
                    publishTime: "2022-03-25 17:55:06",
                    publishUnit: "123123",
                    reportingNum: 1,
                    startTime: "2022-03-10",
                    status: "0",
                    statusDesc: "正有效",
                    tagInfoList: null,
                    type: "gaoxing_policy",
                    typeName: "推行政策"},
            ],
            };
        },
    }
</script>

<style scoped lang="scss">
    .collapse-cont /deep/ {
        padding: 5px;
        border: none;
        font-size: 14px;
        width:70%;
        margin-top:100px;
        margin-left:100px;
      .el-collapse-item__header,
    .el-collapse-item__header.is-active,
    .el-collapse-item__wrap {
        border-bottom: 1px solid #dbe0ee;
        background: none;
    }
    .el-collapse-item__arrow {
        width: 40px;
    }
    .el-icon-arrow-right:before {
        content: '+ 展开';
    }
    .el-collapse-item__arrow.is-active {
        transform: none;
    }
    .el-collapse-item__arrow.is-active:before {
        content: '- 折叠';
    }
    ._t {
        color: #333333;
        font-size: 22px;
        font-weight: bold;
        width: 40%;
    }
    ._p {
        width: 20%;
        color: #666666;
    }
    ._z {
        width: 20%;
        color: #666666;
    }
    .fold-btn {
        width: 20%;
        text-align: right;
        padding-right: 10px;
        color: #666666;
    }
    .table-item-tit,
    .table-item-cont {
        display: flex;
        box-sizing: border-box;
        line-height: 45px;
    .items20 {
        width: 20%;
        box-sizing: border-box;
    a{
        text-decoration:none
    }
    }
    .items40 {
        width: 40%;
        box-sizing: border-box;
    }
    }
    .table-item-tit {
    .items20,
    .items40 {
        color: #999999;
    }
    }
    .table-item-cont {
        //border-left: 2px solid #7d96e1;
        //background: rgba(15, 26, 122, 0.1);
    }
    }

</style>