element 表格 鼠标点击某一行改变颜色 切默认选中第一行

您可以使用以下代码来实现您的需求：

<template>
  <el-table :data="tableData" @row-click="handleRowClick" :highlight-current-row="true">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市'
        },
        {
          name: '李四',
          age: 22,
          address: '上海市'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市'
        }
      ]
    }
  },
  methods: {
    handleRowClick(row, column, event) {
      // 点击行时改变颜色
      event.currentTarget.style.backgroundColor = '#f5f5f5'
    }
  },
  mounted() {
    // 默认选中第一行
    this.$refs.table.setCurrentRow(this.tableData[0])
  }
}
</script>

在这个示例代码中，我们使用了 Element UI 的表格组件，并且通过绑定 `@row-click` 事件来监听行的点击事件。在 `handleRowClick` 方法中，我们通过 `event.currentTarget.style.backgroundColor` 来改变当前行的背景色。同时，我们设置了 `highlight-current-row` 属性为 `true`，来使当前行高亮显示。

在 `mounted` 钩子函数中，我们通过 `this.$refs.table.setCurrentRow(this.tableData[0])` 来默认选中第一行。其中，`this.$refs.table` 是通过 `ref` 属性获取到表格组件的引用。