Acro Design Pro vue - table 行点击高亮显示

在使用element的时候，好像只用在table中添加一个 highlight-current-row 就可以当前行高亮 。
acro table没找到这属性，可以使用 row-class 动态添加 样式实现。

// template
      <a-table
          :columns="columns"
          :data="userTableData"
          column-resizable
          :hoverable="false"
          :scroll="scrollPercent"
          :loading="loading"
          row-key="id"
          :bordered="{ cell: true }"
          :size="size"
          :pagination="PaginationProps"
          :row-class="activeRowClass"   
          @page-change="changeTablePageClick"
          @row-click="handelClickTableRow"
        >

// script
	  const activeRow = ref({});

	  const handelClickTableRow = (e) => {
	    activeRow.value = e;
	  };
   
	 const activeRowClass = (record) => {
	    return record.raw.id === activeRow.value.id ? 'activeRowLight' : '';
	  };

// style 
	<style lang="less" scoped>
	  :deep(.arco-table-td) {
	    background: unset;
	  }
	</style>

为了避免一些奇怪的问题，所以将 activeRowLight 的样式放到 app.vue 中，相当于公共样式。要注意的是开始设置的时候，虽然类名已经添加到了DOM上，但样式并未生效，后查看到每个 td 都有自己的背景色，所以上面将每个td 的背景色去掉之后，咱自己添加的背景色就显示出来了。然后hoverable的时候也会遮盖咱的背景色，这里就给设置取消了。

<template>
  <a-config-provider :locale="locale" :size="size">
    <router-view />
    <global-setting />
  </a-config-provider>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
  import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
  import GlobalSetting from '@/components/global-setting/index.vue';
  import useLocale from '@/hooks/locale';
  import { useAppStore } from '@/store';

  const { currentLocale } = useLocale();
  const locale = computed(() => {
    switch (currentLocale.value) {
      case 'zh-CN':
        return zhCN;
      case 'en-US':
        return enUS;
      default:
        return enUS;
    }
  });

  const size = computed(() => {
    const userCofig = useAppStore();
    return userCofig.size;
  });
</script>

<style>
  .activeRowLight {
    background: #b8d4ff;
  }
</style>