![在这里插入图片描述 [element-ui] el-table 行与行之间设置间隔, 行内的渐变效果_javascript](https://file.cfanz.cn/uploads/png/2023/04/07/17/7Bc8d88f5S.png)
设置行与行之间的间距
::v-deep .el-table__body{
//-webkit-border-horizontal-spacing: 13px; // 水平间距
-webkit-border-vertical-spacing: 13px; // 垂直间距
}设置行内颜色渐变,并实现隔行颜色不一样
![在这里插入图片描述 [element-ui] el-table 行与行之间设置间隔, 行内的渐变效果_ci_02](https://file.cfanz.cn/uploads/png/2023/04/07/17/84fZ028fXZ.png)
// 设置隔行变色
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;
}
参考:
实现element table组件内行与行之间设置间隙效果以及行内的渐变效果以及各种问题










