526互联

antd for vue3 table 使用rowClassName设置样式固定列不生效

发布时间 2023-10-17 18:10:14作者: w1ndz

依赖库版本 ：

Vue 3 + antd for vue v3. X

样式问题 ：固定列背景色不生效，鼠标移入对应行背景色变为初始的白色

columns: [  
  {  
    title: '装置',  
    width: 100,  
    dataIndex: 'areaName',  
    fixed: 'left'  
  },
  ...
  {  
    title: '装置',  
    width: 100,  
    dataIndex: 'areaName',  
    fixed: 'left'  
  },
]

	rowClassName: (record, index) => {
      return record.rushRepair === 1 ? 'table-background-red' : ''
    }

	.table-background-red {
    background: #d33b26;
  }

修改样式后解决

	.table-background-red td {
    background: #d33b26 !important;
  }