Vue + ElementUI 给el-table添加点击事件

可以分三种情况实现点击事件

1. 针对整行点击 @row-click=""

<el-table
  :data="userList"
  highlight-current-row
  border
  @row-click="handleSeleUserId"
>
  <el-table-column
    prop="id"
    label="UID"
    align="center"
  />
</el-table>

2. 针对每个单元格点击 @click=""

<el-table
  :data="userList"
  highlight-current-row
  border
>
  <el-table-column
    prop="name"
    label="UID"
    align="center"
  >
    <template scope="scope">
      <div @click="handleSeleUserId(scope.row)">{{ scope.row.name }}</div>
    </template>
  </el-table-column>
</el-table>

highlight-current-row 属性控制点击是否显示高亮

高亮样式如下：

.el-table__body tr.current-row > td {
  background-color: rgb(217, 224, 238) !important;
  cursor: pointer;
}

3. 针对一列添加 radio

<el-table-column
  label="用户ID"
  align="center"
>
  <template slot-scope="scope">
    <el-radio
      v-model="userQuery.userId"
      :label="scope.row.id"
      prevent
      @change="handleCheck(scope.row)"
    />
  </template>
</el-table-column>

实现效果