1、绑定customRow与rowClassName事件

image-1655359716100
image-1655359815703

(1)methods中添加customRow为点击行添加点击事件

methods: {
  // 行点击
  customRow (record, index) {
    return {
      style: {
        // 字体颜色
        // color: (record.key === this.selectedRowKeys) && '#0e80e7',
        // 行背景色
        // 'background-color': (record.key === this.selectedRowKeys) ? '#0e80e7' : '#fff'
      },
      on: {
        // 鼠标单击行
        click: (event) => {
          // 存储点击行id,让其高亮
          this.selectedRowKeys = record.key
        }
      }
    }
  }
}

(2)computed中return需要添加的类名,‘rowSelected’

computed: {
  // 动态给表格添加类名
  getRowClassname () {
    const that = this
    return function (record, index) {
      console.log(record.key, that.selectedRowKeys)
      if (record.key === that.selectedRowKeys) {
        return 'rowSelected'
      }
    }
  },
},

2、添加样式

.rowSelected {
  background-color: #0e80e7;
  td {
    color: #ffffff;
    span {
      color: #ffffff;
    }
  }
  &:hover {
    background-color: #0e80e7 !important;
    td {
      background-color: #0e80e7 !important;
    }
  }
}

image-1655360289266