element ui 表格 鼠标点击改变某一行的字体颜色 默认选中第一行

好的，如果您使用 Element UI 的表格组件，您可以使用以下代码实现在鼠标点击表格的行时改变该行字体颜色以及默认选中第一行：

HTML代码：

<el-table ref="table" :data="tableData" @row-click="handleRowClick">
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="quantity" label="数量"></el-table-column>
</el-table>

JavaScript代码：

export default {
  data() {
    return {
      tableData: [
        { name: '苹果', quantity: 10 },
        { name: '香蕉', quantity: 5 },
        { name: '橙子', quantity: 8 }
      ]
    };
  },
  mounted() {
    // 默认选中第一行
    this.$refs.table.setCurrentRow(this.tableData[0]);
  },
  methods: {
    handleRowClick(row) {
      // 将所有行的字体颜色设置为黑色
      this.$refs.table.clearSelection();
      // 将鼠标点击的行的字体颜色设置为红色
      row.$el.style.color = 'red';
      // 设置当前选中行
      this.$refs.table.setCurrentRow(row);
    }
  }
};

在这个例子中，我们首先在表格组件上添加了 `@row-click` 事件监听器，当用户点击表格中的某一行时，该监听器将会被调用。接着，在 `mounted` 钩子函数中，我们将第一行设置为当前选中行，表示默认选中第一行。在 `handleRowClick` 方法中，我们将所有行的选中状态清除，然后将鼠标点击的行的字体颜色设置为红色，并将该行设置为当前选中行。这样，当用户点击某一行时，该行的字体颜色就会改变为红色，表示该行被选中了。希望这可以帮助您解决问题！