摘要：
'orange':'rgba(0,0,0,0.65)',//行背景色'background-color':record.id===this.physicalSurveyCurrRowId?
【方式一】：通过设置customRow达到目的，点击时遍历所有行设置为正常颜色，把当前行设置为特殊颜色（高亮色）
HTML：
<a-table ref="table"size="small"rowKey="id"bordered :columns="physicalSurveyColumns":data-source="physicalSurveyData":pagination="pagination":customRow="customRow" > </a-table>
JS -> methods：
//自定义行 customRow(record) { return{ on: { click: (e) =>{ const oldList = document.querySelectorAll('.checked-td-of-add-table') if(oldList) { for (let j = 0; j < oldList.length; j++) { oldList[j].classList.remove('checked-td-of-add-table') } } const children =e.target.parentNode.children for (let i = 0; i < children.length; i++) { children[i].classList.add('checked-td-of-add-table') } } } } }
CSS：
/deep/ .checked-td-of-add-table {background-color:rgba(24, 144, 255, 0.5); }
【方式二】：通过设置customRow达到目的，点击时记录ID，每一行就会自动加载style的样式，这里可以使用条件来达到加载不同样式的目的，比如设置行背景色：'background-color': record.id === this.physicalSurveyCurrRowId ? '#FFFF99' : 'white'
HTML：
<a-table
ref="table"size="small"rowKey="id"bordered
:columns="physicalSurveyColumns":data-source="physicalSurveyData":pagination="pagination":customRow="customRow"
>
</a-table>JS -> methods：
//自定义行 customRow(record, index) { return{ //自定义属性，也就是官方文档中的props，可通过条件来控制样式 style: { //字体颜色 'color': record.id === this.physicalSurveyCurrRowId ? 'orange' : 'rgba(0, 0, 0, 0.65)', //行背景色 'background-color': record.id === this.physicalSurveyCurrRowId ? '#FFFF99' : 'white' //// 字体类型 //'font-family': 'Microsoft YaHei', //// 下划线 //'text-decoration': 'underline', //// 字体样式-斜体 //'font-style': 'italic', //// 字体样式-斜体 //'font-weight': 'bolder' }, on: { //鼠标单击行 click: event =>{ //记录当前点击的行标识 this.physicalSurveyCurrRowId =record.id } } } }
【方式三】：与方式一类似，只是代码实现方式不同，通过设置customRow达到目的，点击时遍历所有行设置为正常颜色，把当前行设置为特殊颜色（高亮色）
HTML：
<a-table
ref="table"size="small"rowKey="id"bordered
:columns="physicalSurveyColumns":data-source="physicalSurveyData":pagination="pagination":customRow="customRow"
>
</a-table>JS -> methods：
//自定义行 customRow(record, index) { return{ on: { //鼠标单击行 click: event =>{ event.currentTarget.parentNode.querySelectorAll('tr').forEach(item =>{ item.style.background = 'white'}) event.currentTarget.style.background = 'green'} } } }
【方式四】：通过设置customRow与rowClassName达到目的，点击时记录ID，rowClass就会根据是否是点击时的ID来加载指定的样式
HTML：
<a-table ref="table"size="small"rowKey="id"bordered :columns="physicalSurveyColumns":data-source="physicalSurveyData":pagination="pagination":customRow="customRow":rowClassName="setRowClassName" > </a-table>
JS -> methods：
//选中行 customRow(record, index) { return{ on: { click: () =>{ this.physicalSurveyCurrRowId =record.id } } } }, setRowClassName(record) { return record.id === this.physicalSurveyCurrRowId ? 'clickRowStyl' : ''}
CSS：设置自定义行的悬浮样式
.ant-table-tbody {.clickRowStyl:hover { td { background-color: #00b4ed; }} }
都能达到目的，按需要选择。