vue3中el-table默认为单击选择样式,但是没有选择样式

在Vue3中，Element UI (简称`el-table`) 的表格默认提供了一种单选或多选的交互模式，当你点击某一行时，该行会被高亮显示表示被选中。如果想要自定义这种默认的单击选择样式，你可以通过覆盖组件的内置CSS样式或者直接在你的模板中修改`<el-table>`的选中状态相关的属性。

以下是一个基本的例子：

1. 修改默认样式：在你的样式表文件（如`main.css`）中添加或覆盖`.el-table__row--selected`这个类的样式，例如改变背景色、边框等：

.el-table__row--selected {
  background-color: #custom-selected-color !important;
  border-color: transparent;
}

2. 使用v-model绑定选择状态：如果你想禁用默认的选择行为并手动控制选中状态，可以移除`@selection-change`事件监听，并在需要的时候手动设置`row-key`对应的值为true或false：

<template>
  <el-table :data="tableData" :row-key="getRowKey" @selection-change="handleSelectionChange">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selected) {
      this.selectedRows = selected;
    },
    getRowKey(row) {
      // 返回一个唯一标识，防止重复选择
      return row.id; // 或者其他的唯一属性名
    }
  }
};
</script>

如果你希望完全禁止单击选择行为，可以直接去掉`row-key`和`@selection-change`属性。