Tome nota y registre la configuración de la tabla, especialmente la configuración del control deslizante
Use una tarjeta para cargar el formulario, luego configure el estilo de la tarjeta para que aparezca en la parte superior derecha de la página, luego configure el atributo de índice z para que aparezca en la parte superior de la página y luego configure el grado de difuminar.
<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>El efecto final es el siguiente:
En el-table, las líneas de la tabla no se agregan deliberadamente, porque las líneas de la tabla se desalinearán después de configurar la barra de desplazamiento aquí, por lo que es más hermoso eliminarla, por lo que no se agrega.