el-table table virtualization and slider setting

Make a note and record the settings of the table, especially the settings of the slider

---

Use a card to load the form, then set the style for the card so that it appears on the top right of the page, then set the z-index attribute to make it at the top of the page, and then set the degree of blur.

<el-card class="texttable" :body-style="{ padding: '0px' }" style="width: 600px;">
    <el-table
        :data="datas"
        max-height="400" 
        style="background-color: #545c64;border: 0;margin: 0;"
        :header-cell-style="{'background-color': '#545c64','text-align':'center','color':'#fff'}"
        :cell-style="{'background-color': '#545c64','text-align': 'center','color':'#fff'}"
        >
        <!-- 表格内容 -->
    </el-table>
</el-card>

<style scoped>
/* 定位，置顶，虚化程度设置为0.85 */
.texttable {
    position: absolute;
    right: 100px;
    top: 100px;
    z-index: 999;
    opacity: 0.85;
}
/* 去除底部的白线 */
.el-table::before {
    height: 0;
}
/* 设置滚动快样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #353a3f;
    border-radius: 3px;
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
/* 隐藏表格头部多余的空白列 */
::v-deep .el-table th.gutter{
  display: none;
  width:0px
}
/* 隐藏表格主题的多余空白列 */
::v-deep .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
/* 强制表格主体填充整个宽度 */
::v-deep .el-table__body{
  width: 100% !important;
}
</style>

The final effect is as follows:

 

In the el-table, the table lines are deliberately not added, because the table lines will be misaligned after the scroll bar is set here, so it is more beautiful to remove it, so it is not added.