table tbody {
display: block;
height: 400px;
overflow: auto;
}
table thead,
tbody tr{
display: table;
width: 100%;
table-layout: fixed;
text-align: center;
}
/*定义滚动条样式(高宽及背景)*/
table ::-webkit-scrollbar {
width: 6px; /* 滚动条宽度, width:对应竖滚动条的宽度 height:对应横滚动条的高度*/
}
/*定义滚动条轨道(凹槽)样式*/
table ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 较少使用 */
border-radius: 3px;
}
/*定义滑块 样式*/
table ::-webkit-scrollbar-thumb {
border-radius: 3px;
height: 100px; /* 滚动条滑块长度 */
background-color: #ccc;
}
this.$nextTick(()=>{ // 防止滚动条出现 导致出现表格宽度问题
let tbody = document.getElementById('tbody')
if (tbody.scrollHeight>tbody.clientHeight){
this.scroll = true
}else{
this.scroll = false
}
})