el-table 滚动条 fixed tooltip 相关问题

记一下el-table的样式设置

/* 滚动闪烁BUG */
.el-table{
width: 99% !important
}
.el-table__body {
    width: 100% !important;
}
// 滚动条错位问题
.el-table {
    th.gutter, colgroup.gutter {
        width: 10px !important;//此处的宽度值，对应你自定义滚动条的宽度即可
    }
}

所有的10px都是与滚动条相对应的

//滚动条定义
.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 10px; // 纵向滚动条 必写
}
/*定义滚动条轨道 内阴影+圆角*/
.el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px rgba(255, 255, 255, 0) inset;
    /*滚动条的背景区域的内阴影*/
    border-radius: 10px;
    /*滚动条的背景区域的圆角*/
    background-color: rgba(255, 255, 255, 0);
    /*滚动条的背景颜色*/
}

fixed 高度问题 fixed位置问题(fixed是right)

//table Fix
.table-fixed,.el-table {
    .el-table__fixed-right {
        height: 100% !important;
    }
    .el-table__fixed-right{
        right: 0px !important;
    }
    .el-table__fixed-right-patch{
        width: 0px!important;
    }
    .el-table__fixed {
        height: 100% !important;
    }
}
//此处为y轴滚动条的相关样式
.el-table--scrollable-y {
    .el-table__fixed-right {
        right: 10px !important;
    }
    //头部的最右侧
    .el-table__fixed-right-patch{
        width: 10px!important;
    }
}

上下左右我是上所以是top

//el-table属性
 :tooltip-effect="'tooltipStyle'"
 //el-table-column
  :show-overflow-tooltip="true"

属性是相对应的

// table-item隐藏框样式修改
.is-tooltipStyle {
    background: #fff;
    color: #3759af;
    border: 1px solid rgb(158, 157, 157);
    font-size: 15px;
    max-width: 40%;
    transform: translateY(20px);
}

.is-tooltipStyle[x-placement^=top] .popper__arrow::after {
    border-top-color: white;
}

.is-tooltipStyle[x-placement^=top] .popper__arrow {
    border-top-color: rgb(158, 157, 157);
}