設(shè)置行與行之間的間距
::v-deep .el-table__body{
//-webkit-border-horizontal-spacing: 13px; // 水平間距
-webkit-border-vertical-spacing: 13px; // 垂直間距
}
設(shè)置行內(nèi)顏色漸變，并實(shí)現(xiàn)隔行顏色不一樣
// 設(shè)置隔行變色
tableRowClassName({ rowIndex}) {
if (rowIndex % 2 === 0) {
return 'yellow'
} else {
return 'orange'
}
},
::v-deep .yellow
background: linear-gradient(90deg,rgba(31,94,167,0.00) 3%, rgba(31,94,167,0.40) 40%, rgba(31,94,167,0.40) 70%, rgba(31,94,167,0.00) 100%) !important;
}
::v-deep .orange
background: linear-gradient(90deg,rgba(31,94,167,0.00) 3%, rgba(31,94,167,0.20) 50%, rgba(31,94,167,0.20) 70%, rgba(31,94,167,0.00) 100%) !important;
}
參考：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-620189.html
實(shí)現(xiàn)element table組件內(nèi)行與行之間設(shè)置間隙效果以及行內(nèi)的漸變效果以及各種問(wèn)題文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-620189.html
到了這里，關(guān)于[element-ui] el-table 行與行之間設(shè)置間隔, 行內(nèi)的漸變效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
