ant design vue 中 table 组件 选中的表格中的某一项高亮显示
<template>
<a-table
rowKey="id"
:columns="columns"
:dataSource="tableList"
:pagination="false"
class="j-table-force-nowrap"
:customRow="customRow"
>
</a-table>
</template>
export default class extends Vue {
columns = ref<array>([]),
tableList = ref<array>([]),
leftAlignId = ref<string | number>("")
// 自定义行
customRow(record, index) {
console.log(record, index)
return {
// 自定义属性,也就是官方文档中的props,可通过条件来控制样式
style: {
// 设置字体颜色
// 'color': record.id === this.leftAlignId ? '#fff' : '',
// 设置行背景色
'background-color': record.id === this.leftAlignId ? '#E6F7FF' : ''
// 设置字体类型
// 'font-family': 'Microsoft YaHei',
// // 下划线
// 'text-decoration': 'underline',
// // 字体样式-斜体
// 'font-style': 'italic',
// // 字体加粗
// 'font-weight': 'bold'
},
onClick: (event: any) => {
// 记录当前点击的行标识
this.leftAlignId = record.id
},
}
},
}