ant Design of vue 实现table每栏动态根据条件设置背景颜色(table栏每一栏颜色自定义)

效果图:
ant Design of vue 实现table每栏动态根据条件设置背景颜色(table栏每一栏颜色自定义)_第1张图片
注意效果图中,table的表格每一栏颜色都要不一样

代码实现:

页面结构:

 
         

方法:

  rowClassName(record, index) {
      return index % 2 == 0 ? "first" : "second";
  },

样式:

/deep/.ant-table-tbody .first {
    background-color: #061236 !important;
}

/deep/.ant-table-tbody .second {
    background-color: #071641 !important;
}

关键点:通过rowClassName这个属性去动态根据条件设置样式

你可能感兴趣的:(常见框架bug修改,vue.js,javascript,前端)