html
<a-table
:columns="columns"
:data-source="markerArr"
size="small"
:pagination="false"
:customRow="onClickRow"
:rowClassName="setRowClassName"
height="250"
>
<template slot="status" slot-scope="text, record">
<p
:class="{
appoint_cl: record.status == '超时',
cancel_cl: record.status == '离线',
pass_cl: record.status == '正常',
}"
>
{{ text }}
</p>
</template>
</a-table>
js
export default {
data() {
return {
rowid: '', // 选中行的id
markerArr: [
{
key: '1',
uid: 1,
title: '刘叔',
point: '121.43|37.45',
address: '工业园区',
color: 'red',
status: '超时',
},
{
key: '2',
uid: 2,
title: '刑寇',
point: '121.38|37.53',
address: '具体位置',
color: 'green',
status: '正常',
},
{
key: '3',
uid: 3,
title: '大头',
point: '121.25|37.5',
address: '科技园1号',
color: 'gray',
status: '离线',
},
],
}
}
}
// 选中行
onClickRow(record) {
return {
on: {
click: () => {
// console.log(record, '选中行')
this.rowid = record.uid
},
},
}
},
// 选中行添加类
setRowClassName(record) {
return record.uid == this.rowid ? 'clickRowSty' : ''
},
css
/deep/ .clickRowSty {
background-color: #1890ff;
color: #fff;
}
/deep/ .clickRowSty:hover > td {
background-color: #1890ff;
}
/deep/ .ant-table-tbody > tr > td {
cursor: pointer;
}