当前位置:   article > 正文

实现修改el-table表格中的字体或背景颜色

实现修改el-table表格中的字体或背景颜色

需求:计算两数之差,并且在表格中显示,当差大于0,则当前的背景色或字体颜色为绿色,小于0则 显示其他颜色,等于0则正常显示

  1. <el-table v-loading="loading" :data="list" highlight-current-row stripe border
  2. :header-cell-style="labelStyle" :cell-style="changeBg" height="580px">
  3. <el-table-column prop="country" width="100" align="center"></el-table-column>
  4. <el-table-column width="100" align="center">
  5. <template slot-scope="{ row }">
  6. {{ row.num1- row.num2}}
  7. </template>
  8. </el-table-column>
  9. <el-table-column prop="num1" label="数据1" min-width="100" align="center"></el-table-column>
  10. <el-table-column prop="num2" label="数据2" min-width="100"
  11. align="center"></el-table-column>
  12. </el-table>
  1. /* data 部分 */
  2. data() {
  3. return {
  4. labelStyle: { //修改table 头部header样式
  5. fontSize: '24px',
  6. fontWeight: 600,
  7. color: '#585858',
  8. }
  9. }
  10. }
  11. /* methods 函数部分 */
  12. // 改变table字体颜色
  13. changeBg({ row, column, rowIndex, columnIndex }) {
  14. const diff = row.patsanp_patent_num - row.heima_patent_num;
  15. if (diff > 0 && columnIndex === 1) { // columnIndex 代表第几列
  16. return {
  17. color: '#45A321',
  18. fontWeight: 600
  19. }
  20. } else if (diff < 0 && columnIndex === 1) {
  21. return {
  22. color: '#d11a32',
  23. fontWeight: 600
  24. }
  25. } else if (diff == 0 && columnIndex === 1) {
  26. return {
  27. color: '#000',
  28. }
  29. }
  30. else if (columnIndex === 0) {
  31. // 获取第二列的字体颜色
  32. const secondColumnColor = this.changeBg({
  33. row,
  34. column,
  35. rowIndex,
  36. columnIndex: 1
  37. }).color;
  38. return {
  39. color: secondColumnColor,
  40. fontWeight: 600
  41. };
  42. }
  43. }

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号