rowClassName 表格行的类名 动态添加类名 function(record, index)
customRow 可以添加行事件 function(record, index)
第一种
<a-table
:data-source="dataSource"
:columns="columns"
style="width:100%"
:rowClassName="rowClassName"
:customRow="handleClickRow"
>
<!-- 表格内的一些组件-->
</table>
/* scoped 局部样式,仅限于当前页面 */
<style scoped>
/deep/ .active td{
background: red !important;
}
</style>
data(){
return{
selectIndex=null
}
}
...
...
...
handleClickRow(record,index){
console.log(record,index)
return {
on: {
click: () => {
this.selectIndex=index
}
}
}
},
rowClassName(record,index){
console.log(record,index)
retrun index===this.selectIndex?'active':''
}
2、第二种
<a-table
:customRow="handleClickRow"
:rowSelection="{type:'radio',onChange:onSelectChange,selectedRowKeys}"
>
</a-table>
handleClickRow(record, index) {
return {
on: {
click: () => {
let code = record.id;
if (this.selectedRowKeys) {
this.selectedRowKeys = [];
}
if (this.selectedRows) {
this.selectedRows = [];
}
this.selectedRowKeys.push(record[code]);
this.selectedRows.push(record);
}
}
};