antd テーブルには独自のマウス移動スタイルがあるため、行には移動後のスタイルが適用されます。次のメソッドは、マウスが行をクリックした後に目的の色効果を実現できます。
<template>
<div style="display: flex">
<a-table
:columns="leftColumns"
:dataSource="leftTableData"
:pagination="false"
style="margin-top: 10px"
:rowKey="
(record, index) => {
return index;
}
"
:customRow="rowClick"
:scroll="{
y: leftTableHeight,
}"
>
</a-table>
</div>
</template>
<script>
import moment from 'moment'
export default {
components: {
},
data() {
return {
extraParams: {
startDate:moment().format('YYYY-MM-DD'),
endDate:moment().format('YYYY-MM-DD'),
inpatientNo:'',
userNo:undefined,
type:undefined,
unStart:false,
unFinish:false,
unEnd: false,
},
leftTableData: [{
patientNo:1,
bedNo:1,
name:'张三',
sex:'男'
},{
patientNo:2,
bedNo:2,
name:'张三',
sex:'男'
},{
patientNo:3,
bedNo:3,
name:'张三',
sex:'男'
},{
patientNo:4,
bedNo:4,
name:'张三1',
sex:'男'
},{
patientNo:5,
bedNo:5,
name:'张三2',
sex:'男'
},{
patientNo:6,
bedNo:6,
name:'张三3',
sex:'男'
},{
patientNo:7,
bedNo:7,
name:'张三4',
sex:'男'
}],
leftColumns: [
{
title: "床号",
dataIndex: "bedNo",
align: "center",
},
{
title: "姓名",
dataIndex: "name",
align: "center",
scopedSlots: {
customRender: "name",
},
},
{
title: "性别",
dataIndex: "sex",
align: "center"
}
],
leftTableHeight: ' calc(100vh - 144px - 40px - 40px ) ',
};
},
created() {
},
methods: {
moment,
rowClick: function (record) {
if(this.extraParams.inpatientNo === String(Number(record.patientNo))){
return {
style: {
color:'black',
background: '#87CEFA',
},
};
}
return {
on: {
click: (e) => {
this.cellLeft(record);
console.log(e)
},
},
};
},
cellLeft(item) {
this.extraParams.inpatientNo = String(Number(item.patientNo));
this.tableData = [];
},
},
};
</script>
<style lang="less" scoped>
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
background: none !important;
}
/deep/ .ant-table-body .ant-table-row-hover{
background: none !important;
}
/deep/ .ant-table-body .ant-table-row-hover>td{
background: none !important;
}
</style>