设置行与行之间的间距
::v-deep .el-table__body{
//-webkit-border-horizontal-spacing: 13px; // 水平间距
-webkit-border-vertical-spacing: 13px; // 垂直间距
}
设置行内颜色渐变，并实现隔行颜色不一样
// 设置隔行变色
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;
}
参考：文章来源：https://www.toymoban.com/news/detail-620189.html
实现element table组件内行与行之间设置间隙效果以及行内的渐变效果以及各种问题文章来源地址https://www.toymoban.com/news/detail-620189.html
到了这里，关于[element-ui] el-table 行与行之间设置间隔, 行内的渐变效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
