ant design vue 选中行,改变单行背景色
背景:因为是刚接触ant design vue 所以遇到了很多问题,此问题来自设计需求,最后根据官方提供的customRow、rowClassName方法来实现了选中行,改变其背景色
贴一下代码,以供下次使用参考
<a-table
ref="table"
size="small"
bordered
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:rowKey="record => record.DrugCode"
:customRow="rowClick"
@change="handleTableChange"
:rowClassName="setRowClassName"
/>
rowClick(record, index) {
return {
on: {
dblclick: () => {
this.drugCompared(record)
console.log(record)
this.rows.index = index //保存选中行的index
console.log('当前选中的行' + index)
}
}
}
},
//保存的行和选中行如果一致,就返回该样式
setRowClassName(record,index) {
console.log(index);
return index === this.rows.index ? 'clickRowStyle' : ''
}
/deep/ .clickRowStyle {
background-color: #00b4ed;
}