ant design vue 中 table 组件 让选中的表格中的某一项高亮显示

table 组件 让选中的一项高亮显示

<template>
	<a-table
       ref="clientLeve_table"
       bordered
       size="middle"
       rowKey="id"
       :columns="clientLeve_columns"
       :dataSource="clientLeve_dataSource"
       :pagination="false"
       class="j-table-force-nowrap"
       :customRow="customRow"
       >
      </a-table>
</template>

export default{
	data(){
		return{
		clientLeve_columns:[],
		clientLeve_dataSource:[],
		leftAlignId:""
		}
	},
	methods:{
		 // 自定义行
        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'
            },
            on: {
              // 鼠标单击行
              click: event => {
                // 记录当前点击的行标识
                this.leftAlignId = record.id
              }
            }
          }
        },
	}
}

思路：在a-table 上绑定属性，值是一个方法customRow，在methods中定义一下customRow方法, 定义一个变量leftAlignId ,并挂载到data上，当选中表格中的某一行时会触发customRow的click 方法，将当前id 保存起来， 随后到customRow的props中给当前选中的tr设置样式 属性即可。