【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

• 前端

首先需要了解俩个函数，row-class-name、cell-class-name

这里以cell-class-name单元格样式为例

row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String
cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String

 

【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

        
        
        
        
          
            
              
                
                  <!-- 审批意见：{{ item.opinion }}
 -->
                  {{ item.Time }}

 

// 修改样式
    tableCellClassName(cel) {
      // 行中数据满足某个条件时class设置为bordertop
      if (cel.row.isBorder) {
        return 'bordertop'
      } else {
        return 'zcbordertop'
      }
    }
::v-deep .bordertop{
  border-top: 2px solid #409EFF;
  text-align: center;
  padding: 7px 0px;
}
::v-deep .zcbordertop{
  text-align: center;
  padding: 7px 0px;
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/9370f19cf1.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐