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

  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>
  1. 针对每个单元格点击 @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;
}
  1. 针对一列添加 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>

实现效果
在这里插入图片描述

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐