vue2中使用table表格怎么自定义鼠标选中和鼠标滑过的背景色

要自定义鼠标选中和鼠标滑过的背景色，你需要使用 CSS 来实现。具体步骤如下：

1. 定义选中和悬停时的背景色，例如：

.table-row-selected {
  background-color: #e6f7ff;
}

.table-row-hover {
  background-color: #f5f5f5;
}

2. 在表格的行元素上绑定事件，监听鼠标的点击和悬停事件，并根据事件类型添加或删除对应的类名，例如：

<template>
  <table>
    <tbody>
      <tr v-for="item in data" :key="item.id"
        :class="{ 'table-row-selected': item.selected, 'table-row-hover': item.hover }"
        @click="handleRowClick(item)"
        @mouseenter="handleRowHover(item, true)"
        @mouseleave="handleRowHover(item, false)">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Alice', age: 20, selected: false, hover: false },
        { id: 2, name: 'Bob', age: 25, selected: false, hover: false },
        { id: 3, name: 'Charlie', age: 30, selected: false, hover: false },
      ],
    };
  },
  methods: {
    handleRowClick(item) {
      item.selected = !item.selected;
    },
    handleRowHover(item, isHover) {
      item.hover = isHover;
    },
  },
};
</script>

在上面的代码中，`table-row-selected` 和 `table-row-hover` 是我们上面定义的类名，它们分别表示选中和悬停时的背景色。在行元素上使用 `:class` 绑定属性，根据 `item.selected` 和 `item.hover` 的值来决定是否添加对应的类名。同时，我们还监听了行元素的 `click`、`mouseenter` 和 `mouseleave` 事件，分别用来处理选中、悬停和取消悬停的逻辑。