当前位置:   article > 正文

改变el-table表头的背景颜色以及表格隔行变色_el-table隔行换色

el-table隔行换色

效果图  :

 代码   :

1. 改变表头背景颜色(直接设置  header-cell-style)

  1. <el-table
  2. :header-cell-style="{backgroundColor:'#4f81bd',color:'white',fontSize:'25px'}"
  3. >
  4. </el-table>

2. 隔行变色

  1. <template>
  2. <div>
  3. <el-table :row-class-name="tableRowClassName"></el-table>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. tableRowClassName({ row, rowIndex }) {
  10. if (rowIndex % 2 === 1) {
  11. return "warning-row";
  12. } else {
  13. return "success-row";
  14. }
  15. },
  16. },
  17. };
  18. </script>
  19. <style scoped lang="scss">
  20. ::v-deep .el-table .warning-row {
  21. background: #d0d8e8;
  22. }
  23. ::v-deep .el-table .success-row {
  24. background: #e9edf4;
  25. }
  26. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/965133
推荐阅读
相关标签
  

闽ICP备14008679号