antVue-表格点击行使其变色
1、绑定customRow与rowClassName事件
(1)methods中添加customRow为点击行添加点击事件
methods: {
// 行点击
customRow (record, index) {
return {
style: {
// 字体颜色
// color: (record.key === this.selectedRowKeys) && '#0e80e7',
// 行背景色
// 'background-color': (record.key === this.selectedRowKeys) ? '#0e80e7' : '#fff'
},
on: {
// 鼠标单击行
click: (event) => {
// 存储点击行id,让其高亮
this.selectedRowKeys = record.key
}
}
}
}
}
(2)computed中return需要添加的类名,‘rowSelected’
computed: {
// 动态给表格添加类名
getRowClassname () {
const that = this
return function (record, index) {
console.log(record.key, that.selectedRowKeys)
if (record.key === that.selectedRowKeys) {
return 'rowSelected'
}
}
},
},
2、添加样式
.rowSelected {
background-color: #0e80e7;
td {
color: #ffffff;
span {
color: #ffffff;
}
}
&:hover {
background-color: #0e80e7 !important;
td {
background-color: #0e80e7 !important;
}
}
}
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果