avue-crud table选中某条数据时高亮

在Vue.js中，尤其是使用Avue框架和Avue-Crud组件时，如果你想要实现在表格（table）中选中某条数据并高亮显示，你可以按照以下步骤操作：

1. 首先，在`<template>`部分，给表格的每一行添加一个`v-model`绑定，用于跟踪当前选中的行。例如：

<template>
  <avue-table :data="tableData" @selection-change="handleSelectionChange">
    <!-- 表格列配置 -->
    <template v-for="(column, index) in columns" :key="index">
      <template slot="header">{{ column.title }}</template>
      <template slot="cell">{{ row[column.field] }}</template>
    </template>
    <div class="actions" slot="footer">
      <!-- 选择按钮或其他操作 -->
    </div>
  </avue-table>
</template>

2. 定义一个数据属性来保存当前选中的行，以及一个方法处理选中状态的变化，比如`handleSelectionChange`：

<script setup>
import { ref } from 'vue';
import { Table } from '@vue-avue/crudy';

const selectedRow = ref(null);
const tableData = ...; // 表格数据

function handleSelectionChange(rows) {
  rows.forEach(row => {
    if (rows.includes(row)) {
      selectedRow.value = row;
      // 根据你的需求，可以设置row对象的一个属性来标记高亮，比如highlighted: true
      row.highlighted = true;
    } else {
      row.highlighted = false;
    }
  });
}
</script>

3. 添加样式以实现高亮效果。在CSS文件或`:host`伪类下，你可以为`.highlighted`类添加背景色、边框等样式，比如：

:host(.highlighted) tr td {
  background-color: yellow; /* 更改为你喜欢的颜色 */
  border-color: orange; /* 更改边框颜色 */
}