技術要點：

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>