当前位置:   article > 正文

el-table 设置斑马纹的效果,改变鼠标移入时和斑马纹的默认颜色_el-table斑马纹颜色

el-table斑马纹颜色

前提条件,引用了预处理,可以使用 /deep/ 或 ::v-deep ,没有使用预处理,使用 >>>

html 部分

  1. <template>
  2. <el-table
  3. :data="tableData"
  4. :row-class-name="tableRowClassName"
  5. :header-cell-style="{background:'rgb(237, 192, 255)'}"
  6. style="width: 100%">
  7. <el-table-column
  8. prop="date"
  9. label="日期"
  10. width="180">
  11. </el-table-column>
  12. <el-table-column
  13. prop="name"
  14. label="姓名"
  15. width="180">
  16. </el-table-column>
  17. <el-table-column
  18. prop="address"
  19. label="地址">
  20. </el-table-column>
  21. </el-table>
  22. </template>

script 部分 

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. tableData: [{
  6. date: '2016-05-02',
  7. name: '王小虎',
  8. address: '上海市普陀区金沙江路 1518 弄'
  9. }, {
  10. date: '2016-05-04',
  11. name: '王小虎',
  12. address: '上海市普陀区金沙江路 1517 弄'
  13. }, {
  14. date: '2016-05-01',
  15. name: '王小虎',
  16. address: '上海市普陀区金沙江路 1519 弄'
  17. }, {
  18. date: '2016-05-03',
  19. name: '王小虎',
  20. address: '上海市普陀区金沙江路 1516 弄'
  21. }]
  22. }
  23. },
  24. methods: {
  25. // tableRowClassName ({ row, rowIndex }) {
  26. // if (row.sfjg == 1) {
  27. // return "el-table__row--striped";
  28. // } else {
  29. // return "";
  30. // }
  31. // },
  32. tableRowClassName ({ row, rowIndex }) {
  33. if (rowIndex % 2 !== 0) {
  34. return 'el-table__row--striped'
  35. }
  36. },
  37. }
  38. }
  39. </script>

style 部分

  1. <style lang="less" scoped>
  2. ::v-deep .el-table__body tr,
  3. ::v-deep .el-table__body td {
  4. padding: 0;
  5. height: 34px;
  6. }
  7. // 显示的颜色
  8. ::v-deep .el-table__body tr.el-table__row--striped td {
  9. background-color: pink;
  10. }
  11. ::v-deep .el-table__row {
  12. background: rgb(187, 255, 0);
  13. }
  14. ::v-deep .el-table__body tr:hover > td{
  15. background-color:rgb(0, 247, 255) !important;
  16. }
  17. </style>

对于组件流体高度这个示例会有bug,可以根据 .hover-row 在element-ui 的原文件中更改鼠标移入时的样式,把斑马纹打开,通过 tr.el-table__row--striped.current-row td.el-table__cell 在原文件中更改斑马纹的背景色

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

闽ICP备14008679号