Element-ui 样式修改小计

表格下边线去除

/deep/.el-table::before {
  height: 0px;
}

表格上边线去除 中间线 改为td

/deep/.el-table th {
border: 0;
outline: none;
}

对话框默认样式清空

.dialog-div {
 /deep/  .el-dialog__header {
    padding: 0;
  }

 /deep/  .el-dialog__body {
    padding: 0;
  }

 /deep/ .el-icon-close:before {
    content: '';
  }
}

Checkbox 多选框 带有边框

<div class="radio-div">
  <el-checkbox v-model="checked3" label="Operator 1" class="checkbox-div"></el-checkbox>
  <el-checkbox v-model="checked4" label="Operator 2" class="checkbox-div"></el-checkbox>
</div>

.radio-div {
  .checkbox-div {
    height: 24px;
  }
  /deep/ .el-checkbox__input {
    display: none;
    color: #6c7c92;
  }
  /deep/ .el-checkbox {
    color: #6c7c92;
  }
  /deep/ .el-checkbox {
    background-color: #f8f8f8;
    padding-left: 20px;
    padding-right: 17px;
    border-radius:4px;
  }
  /deep/ .el-checkbox__label {
    padding-left: 0;
    font-size: 10px;
    font-family: Helvetica-Black;
    font-weight: 900;
    line-height: 24px;
  }
  // 选中后
  /deep/ .is-checked{
    background-color: #6c7c92;
  }
  /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #ffffff;
  }
}

分页样式修改 /deep/ 无效

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #f8f8f8;
  color: #6c7c92;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #6c7c92;
  color: #fff;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6c7c92;
}

分页效果

1553250982(1).jpg

<el-pagination
  small
  layout="prev, slot, next"
  :page-size="3"
  :total="10"
  class="el-page-div"
>
  <span class="page-text">3 / 10</span>
</el-pagination>

.el-page-div {
  .page-text {
    font-size: 12px;
    font-family: Helvetica;
    color: #a8a8a8;
    line-height: 22px;
  }
  /deep/ .el-icon-arrow-right:before {
    color: #a8a8a8;
  }
  /deep/ .el-icon-arrow-left:before {
    color: #a8a8a8;
  }
}

element-ui 多选表格做单选

@select="select"

select(selection,row){
    if(selection.length>1){
      // 清空数组第一位
        selection.shift()
    }
},

el-upload 图片上传 - 照片墙 - 进度条样式

<div class="add-img">
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :limit="4"
    :file-list="fileList"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    class="el-up"
  >
    <div class="add">
      <img src="../../assets/img/home/push.png" alt>
      <p>Add photos</p>
    </div>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt>
  </el-dialog>
</div>

.add-img {
  text-align: left;
  padding: 20px 0;
  .img {
    display: inline-block;
    vertical-align: top;
    width: 150px;
    height: 100px;
    margin-right: 13px;
  }
  .el-up {
    height: 100px;
    width: 150px;
    display: inline-flex;
    /deep/ .el-upload--picture-card {
      height: 100%;
      width: 100%;
      border: none;
      background-color: #ffffff;
      line-height: 0;
    }
    .add {
      display: inline-block;
      vertical-align: top;
      width: 150px;
      height: 100px;
      text-align: center;
      -moz-box-shadow: 0px 0px 15px #fafafa, 0px 0px 20px #fbfbfb;
      -webkit-box-shadow: 0px 2px 15px #fafafa, 0px 9px 20px #fbfbfb;
      box-shadow: 0px 0px 15px #fafafa, 0px 0px 20px #fbfbfb;
      img {
        width: 20px;
        height: 20px;
        margin-top: 28px;
      }
      p {
        font-size: 14px;
        margin-top: 7px;
        text-align: center;
        font-family: "Helvetica-Bold";
        font-weight: bold;
        color: rgba(108, 124, 146, 1);
        line-height: 17px;
        padding: 0;
      }
    }
    /deep/ .el-upload-list--picture-card {
      height: 100px;
      display: inline-flex;
    }
    /deep/ .el-upload-list--picture-card .el-upload-list__item {
      height: 100px;
      width: 150px;
    }
    /deep/ .el-upload-list--picture-card .el-progress {
      height: 100px;
      width: 150px;
    }
    /deep/ .el-progress-circle {
      height: 100px !important;
      width: 150px !important;
      svg {
        height: 100px;
        width: 150px;
      }
    }
  }
}

el-input placeholder 颜色

/deep/ .el-input__inner {
        color: #e04b3c;
        &::-webkit-input-placeholder {
          color: #e04b3c;
        }
        &::-moz-input-placeholder {
          color: #e04b3c;
        }
        &::-ms-input-placeholder {
          color: #e04b3c;
        }
      }

el-input 表单验证错误提示颜色

/deep/ .el-form-item__error {
        color: #ffffff;
      }