antd-vue中table⾏⾼亮效果实现
【⽅式⼀】：通过设置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].ve('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',
/
/ // 字体样式-斜体
queryselectorall用法// '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;
}
}
}
都能达到⽬的，按需要选择。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。