a-table 组件让选中的表格中的某一项高亮显示

凯宾斯基 / 2023-08-04 / 原文

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设置样式属性即可。

https://blog.csdn.net/hxm2017jy/article/details/122482106

--------------卡顿-----------------

-----------------------这个没有卡顿-------

【方式三】：与方式一类似，只是代码实现方式不同，通过设置customRow达到目的，点击时遍历所有行设置为正常颜色，把当前行设置为特殊颜色（高亮色）

<a-table
  ref="table"
  size="small"
  rowKey="id"
  bordered
  :columns="physicalSurveyColumns"
  :data-source="physicalSurveyData"
  :pagination="pagination"
  :customRow="customRow"
>
</a-table>

// 自定义行
customRow(record, index) {
  return {
    on: {
      // 鼠标单击行
      click: event => {
        event.currentTarget.parentNode.querySelectorAll('tr').forEach(item => {
          item.style.background = 'white'
        })
        event.currentTarget.style.background = 'green'
      }
    }
  }
}