需求
當(dāng)table內(nèi)容列過多時(shí),可通過height屬性
設(shè)置table高度以固定table高度、固定表頭,使table內(nèi)容可以滾動(dòng)
現(xiàn)在需求是右側(cè)滾動(dòng)條
不好看,需要去除滾動(dòng)條
,并隱藏滾動(dòng)條所占列
的位置文章來源:http://www.zghlxwxcb.cn/news/detail-757923.html
// ----------修改elementui表格的默認(rèn)樣式-----------
.el-table__body-wrapper {
&::-webkit-scrollbar { // 整個(gè)滾動(dòng)條
width: 0; // 縱向滾動(dòng)條的寬度
background: rgba(213,215,220,0.3);
border: none;
}
&::-webkit-scrollbar-track { // 滾動(dòng)條軌道
border: none;
}
}
// --------------------隱藏table gutter列和內(nèi)容區(qū)右側(cè)的空白
.el-table th.gutter{
display: none;
width:0
}
.el-table colgroup col[name='gutter']{
display: none;
width: 0;
}
.el-table__body{
width: 100% !important;
}
效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-757923.html
到了這里,關(guān)于element ui el-table表格縱向橫向滾動(dòng)條去除并隱藏空白占位列的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!