設(shè)置包裹table組件的標(biāo)簽flex:1
將table高度設(shè)為100%
更改table默認(rèn)滾動(dòng)條
統(tǒng)一設(shè)置樣式,在App.vue添加樣式：文章來源：http://www.zghlxwxcb.cn/news/detail-516336.html
.el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #ebeef5;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 1);
}
對應(yīng)界面設(shè)置樣式文章來源地址http://www.zghlxwxcb.cn/news/detail-516336.html
<style lang="scss">
.el-table {
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 10px; /*滾動(dòng)條寬度*/
height: 10px; /*滾動(dòng)條高度*/
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: 0px 1px 3px rgba(0, 0, 0, .3) inset; /*滾動(dòng)條的背景區(qū)域的內(nèi)陰影*/
border-radius: 10px; /*滾動(dòng)條的背景區(qū)域的圓角*/
background-color: rgba(255, 255, 255, 1); /*滾動(dòng)條的背景顏色*/
}
/*定義滑塊 內(nèi)陰影+圓角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px rgba(0, 0, 0, .2) inset; /*滾動(dòng)條的內(nèi)陰影*/
border-radius: 10px; /*滾動(dòng)條的圓角*/
background-color: #ebeef5; /*滾動(dòng)條的背景顏色*/
}
}
</style>
到了這里，關(guān)于element-ui 設(shè)置table表頭固定的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
