Vue3 + TypeScript + Element Plus 设置表格行背景颜色

技术要点：

1、使用 :row-class-name="setRowClassName" 设置表格行类名

2、不能同时使用 stripe

3、设置行类名的样式

应用效果：

同时使用 stripe 出来的效果：

参考代码：

ReagentTable.vue

<script setup lang="ts" name="ReagentTable">
......// 设置表格行类名
const setRowClassName= ({ row, rowIndex }: { row: IReagent; rowIndex: number }) => {// 奇数行if ((rowIndex + 1) % 2 === 1) {return "odd-row";}// 偶数行else {return "even-row";}
};......
</script><template><div><el-table......:row-class-name="setRowClassName"......>......</el-table></div>
</template><style scoped lang="scss">
// 表格奇数行样式
::v-deep .el-table .odd-row {background-color: #d4f3d6;
}// 表格偶数行样式
:deep .el-table .even-row {background-color: #f3d3e0;
}
</style>