给表格特定行设置高亮背景色
- a-table标签设置属性 :rowClassName=“setRowbg”
- 定义methods方法setRowbg
- 定义样式 .bg-pink
<a-table
:columns="columns"
:rowClassName="setRowbg"
:data-source="loadData"
bordered
:scroll="{ x: 1300 }"
:pagination="false"
>
// 设置每行的颜色
setRowbg(record, index) {
if (index == 0) { // 条件
return 'bg-pink'
}
}
//设置样式类名
/deep/ .bg-pink {
background-color: rgb(255, 212, 147);
}
给表格每一行添加点击等事件并使其高亮
- table标签添加 :customRow=“rowClick”
- 定义方法 rowClick
<a-table
:columns="columns"
:rowClassName="setRowbg"
:data-source="loadData"
bordered
:scroll="{ x: 1300 }"
:pagination="false"
:customRow="rowClick"
>
// 点击每一行添加变量
rowClick(record) {
return {
on: {
click: () => {
// 点击该行时赋值
this.tableCurrRowId = this.tableCurrRowId == record.id ? '' : record.id
}
}
}
}
点击头部的其他事件
rowClick(record) {
return {
on: {
click: (event) => {}, // 点击行
dblclick: (event) => {},
contextmenu: (event) => {},
mouseenter: (event) => {}, // 鼠标移入行
mouseleave: (event) => {}
}
}
}