日常element使用

全局修改element中的样式(重点：全局，也就是会出现样式污染！)

scss

$myBgColor: #101129;
$myFontColor: rgba(255, 255, 255, 0.8);
$myGrayColor: rgba(255, 255, 255, 0.15);

//el-table的border颜色
.border-el-table {
  border: 1px $myGrayColor solid;
}

.border-top-1 {
  border-top: 1px $myGrayColor solid;
}

.border-right-1 {
  border-right: 1px $myGrayColor solid;
}

.border-bottom-1 {
  border-bottom: 1px $myGrayColor solid;
}

.border-left-1 {
  border-left: 1px $myGrayColor solid;
}

/*========================================================start====================================================*/

//表格的样式
.el-table, .el-table__expanded-cell {
  background-color: transparent !important;
  color: $myFontColor;
}

.el-table th, .el-table tr {
  background-color: transparent !important;
  color: $myFontColor !important;
}

/* 用来设置当前页面element全局table 各行变色*/
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: $myFontColor !important;
}

/* 用来设置当前页面element全局table 各行变色*/
.el-table--striped .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #1890ff !important;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #1890ff !important;
  /* 设置文字颜色，可以选择不设置 */
}

// 鼠标悬停样式
.el-table__body .el-table__row.hover-row td {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #1890ff !important;
}

//table 边框颜色
.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: 1px $myGrayColor solid !important;
}

.el-table--border .el-table__cell {
  border-right: 1px $myGrayColor solid !important;
}

.el-table--group, .el-table--border {
  border: 1px $myGrayColor solid !important;
}

.el-table .el-table--border {
  border-right: 1px $myGrayColor solid;
  border-bottom: 1px $myGrayColor solid;
}

/* 表格下边框颜色 */
.el-table--border::after,
.el-table--group::after,
.el-table__fixed-right::before,
.el-table::before {
  background-color: transparent;
}

.table-no-right-border {
  .el-table tr th:last-child, td:last-child {
    border-right: none !important;
  }
}


.addBg {
  //background: #ecf0f3;
  //background: #e4eff7;
  //background: #3b75ec;
  background: $myBgColor !important;
  //background-size: cover;
}

.mPageFontColor {
  color: $myFontColor;
}

//分页控件 强行改动
.pagination-container {
  background: transparent !important;

  & .el-pagination__total {
    color: $myFontColor;
  }

  & .el-pagination__jump {
    color: $myFontColor;
  }
}

//input相关
.el-form-item__label {
  color: $myFontColor !important;
}

.el-input__inner {
  background: $myBgColor;
  color: $myFontColor !important;
  border: 1px $myGrayColor solid !important;
}

//时间选择器
.el-picker-panel .el-input__inner {
  background: $myFontColor;
  color: rgba(0, 0, 0, 0.7) !important;
}

//时间选择区间 里面的背景、字体颜色
.el-input__inner .el-range-input {
  background: transparent !important;
  color: $myFontColor !important;
}

//分割符号的颜色
.el-input__inner .el-range-separator {
  color: $myFontColor !important;
}

.el-dialog {
  & .el-form-item__label {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  & .el-input__inner {
    background: white;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px #DCDFE6 solid !important;
  }

  //时间选择区间 里面的背景、字体颜色
  & .el-input__inner .el-range-input {
    background: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  //分割符号的颜色
  & .el-input__inner .el-range-separator {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  //dialog中的表格
  .el-table, .el-table__expanded-cell {
    background-color: #ffffff !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  .el-table th, .el-table tr {
    background-color: #ffffff !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

}

.el-popover .icon-body {
  & .el-input {
    border: 1px #e6ebf5 solid;
  }

  & .el-input__inner {
    background-color: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }
}

.m-login-style {
  & .el-form-item__label {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  & .el-input__inner {
    background: white;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px #DCDFE6 solid !important;
  }

  //时间选择区间 里面的背景、字体颜色
  & .el-input__inner .el-range-input {
    background: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  //分割符号的颜色
  & .el-input__inner .el-range-separator {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  & .el-tabs__header {
    .el-tabs__item {
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .el-tabs__item.is-active {
      color: #1890ff;
    }
  }

}


.el-tree {
  background: transparent !important;
  color: $myFontColor !important;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: whitesmoke !important;
  color: #330000;
}

.el-tree-node__content:hover {
  background-color: whitesmoke !important;
  color: #330000;
}

.el-dialog {
  .el-tree {
    background: transparent !important;
    color: #330000 !important;
  }

  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: whitesmoke !important;
    color: #330000;
  }

  .el-tree-node__content:hover {
    background-color: whitesmoke !important;
    color: #330000;
  }
}


.el-scrollbar__wrap {
  overflow: auto !important;
}

.el-tabs__header {
  .el-tabs__item {
    color: $myFontColor;
  }

  .el-tabs__item.is-active {
    color: #1890ff;
  }
}

/* 侧边栏 顶部 各种样式修改 */
.topmenu-container {
  background-color: $myBgColor !important;

  .el-menu-item {
    color: $myFontColor;
  }
}

.el-menu .el-menu-item:hover {
  outline: 0 !important;
  color: #2E95FB !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.el-menu .el-menu-item.is-active {
  color: #2E95FB !important;
  background: transparent !important;
}

.el-submenu .el-submenu__title:hover {
  color: #2E95FB !important;
  background: transparent !important;
}

//更多菜单 样式修改
.el-menu--horizontal > .el-submenu .el-submenu__title {
  color: $myFontColor !important;
  background: transparent !important;
}

.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #2E95FB !important;
  background: transparent !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}

.el-textarea__inner {
  background-color: transparent;
  color: $myFontColor;
}

.el-card__body {
  background-color: $myBgColor;
}
/* el-form  *  号的颜色 */
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
  color: $myFontColor !important;
}

.el-dialog {
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
    color: #ff4949 !important;
  }
}


.el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
  border-bottom: 1px $myGrayColor solid !important;
}

.el-tabs--card > .el-tabs__header {
  border-bottom: 1px $myGrayColor solid !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav{
  border: 1px solid $myGrayColor !important;
  border-bottom: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__item{
  border-bottom: none;
  border-left: 1px solid $myGrayColor !important;
}
/*==============================end=================================*/

修改dialog的动画

.el-dialog__wrapper {
  transition-duration: 0.3s;
}
.dialog-fade-enter-active{
  animation: none !important;
}
.dialog-fade-leave-active {
  transition-duration: 0.15s !important;
  animation: none !important;
}

.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog{
  animation-fill-mode: forwards;
}

.dialog-fade-enter-active .el-dialog{
  animation-duration: 0.3s;
  animation-name: anim-open;
  animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.dialog-fade-leave-active .el-dialog{
  animation-duration: 0.3s;
  animation-name: anim-close;
}


@keyframes anim-open {
  0% { opacity: 0;  transform: scale3d(0, 0, 1); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}


@keyframes anim-close {
  0% { opacity: 1; }
  100% { opacity: 0; transform: scale3d(0.5, 0.5, 1); }
}

table合并单元格

// 出处
https://www.jb51.net/javascript/288480j4f.htm

spanArr: [],
pos: 0,
//合并单元格逻辑
for (var i = 0; i < this.planDetermineDataList.length; i++) {
  if (i === 0) {
    this.spanArr.push(1);
    this.pos = 0
  } else {
    // 断当前元素与上一个元素是否相同
    if (this.data[i].name=== this.data[i - 1].name) {
      //如果相同就将索引为 pos 的值加一 // 且将数组添加 0
      this.spanArr[this.pos] += 1;
      this.spanArr.push(0);
    } else {
      // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
      // 同时，我们再次添加一个值1，表示重新开始断重复姓名的次数 // 同时 索引加一
      this.spanArr.push(1);
      this.pos = i;
    }
  }
}