0
点赞
收藏
分享

微信扫一扫

论文阅读-2:基于深度学习的大尺度遥感图像建筑物分割研究

程序员知识圈 2023-07-16 阅读 26

文章目录


前言

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。


官方示例

在这里插入图片描述

代码如下:

<el-table
  :data="tableData"
  style="width: 100%"
  :row-class-name="tableRowClassName">
	

定义为第2行为 warning-row 样式,第4行为 success-row 样式

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (rowIndex === 1) {
      return 'warning-row';
    } else if (rowIndex === 3) {
      return 'success-row';
    }
    return '';
  }
},

自定义条件样式

row 是当前行的一个对象,rowIndex 是第几行,起始下标为0,表示第1行

定义样式根据 row.testNum 属性来判断,大于100为 success-row 样式,小于70为 warning-row 样式

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (row.testNum > 100) {
      return 'success-row';
    } else if (row.testNum < 70) {
      return 'warning-row';
    }
    return '';
  }
}

设置背景颜色样式

使用 scoped 设置了样式作用域,这个会影响到 class 的样式

可以尝试使用 /deep/ 深度选择器,必须在 sass 或 less 下

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-table .warning-row {
    background: #ffdcdc;
  }
  /deep/ .el-table .success-row {
    background: #d0d3ff;
  }
</style>

或者使用 >>> 深度选择器,只支持css

<style>
  .el-table >>> .warning-row {
    background: #ffdcdc;
  }
  .el-table >>> .success-row {
    background: #d0d3ff;
  }
</style>

我们的样式颜色将会改变,效果如图:

在这里插入图片描述

当我们出现下图所示,达到条件的样式却不生效:

在这里插入图片描述

先看看是不是加了 stripe 属性的原因

<el-table
  :data="tableData"
  style="width: 100%"
  stripe
  :row-class-name="tableRowClassName">
	

stripe属性是带斑马纹的表格样式,它和 row-class-name 共存时是没有效果滴

stripe属性 + 设置背景颜色样式

那么问题来了,我们既要stripe属性设置斑马纹的表格样式,又要 row-class-name 设置背景样式,又该如何应对?

在这里插入图片描述

步骤:

1、 要使用深度选择器+td
2、 因为table默认有背景色,所以在设置背景色的时要写td,并设置优先级

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-table .warning-row td {
    background: #ffdcdc !important;
  }

  /deep/ .el-table .success-row td {
    background: #d0d3ff !important;
  }
</style>

效果如图:

在这里插入图片描述

设置字体颜色

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-table .warning-row {
    color: #ff0000;
  }
  /deep/ .el-table .success-row {
    color: #0055ff;
  }
</style>

效果如图:

在这里插入图片描述

总结

使用后没有效果的问题!!!

第一步:看看 class 有没有加上去

第二步:如果 class 都加上去了也没有效果,看一下有没有使用 stripe 这个属性,这个属性是带斑马纹的表格样式,它和 row-class-name 共存时是没有效果滴

第三步:如果你也没有使用到 stripe 这个属性,那就要找样式的问题啦

第四步:要 stripe 属性又要 row-class-name 属性,就要设置样式优先级(一定要加td 否则不生效)

举报

相关推荐

0 条评论