el-table横向滚动条不显示问题

简介: el-table横向滚动条不显示问题

背景

在Vue中使用el-table,设置表格高度和宽度后,表格内容超出,横向滚动条没有显示。

解决办法

设置滚动条宽度和高度即可。

/* 设置滚动条宽度和高度 *//deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 8px; /* 横向滚动条 */height: 8px; /* 纵向滚动条 必写 */}
/* 设置滚动条样式 *//deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #dde;border-radius: 3px;
}

image.png

目录
相关文章
|
7月前
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
|
前端开发 API
解决el-table中横向滚动条无法显示的问题
解决el-table中横向滚动条无法显示的问题
2027 0
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
2980 0
Element UI - el-scrollbar 如何隐藏横向滚动条?
Element UI - el-scrollbar 如何隐藏横向滚动条?
623 0
修改elementui table 组件滚动条样式
修改elementui table 组件滚动条样式
126 0
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
281 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
2599 0
|
7月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
116 0
|
JavaScript
element-ui el-table 表格中行高和字体大小调整
element-ui el-table 表格中行高和字体大小调整
3574 0