可以分三种情况实现点击事件
- 针对整行点击
@row-click=""
<el-table
:data="userList"
highlight-current-row
border
@row-click="handleSeleUserId"
>
<el-table-column
prop="id"
label="UID"
align="center"
/>
</el-table>
- 针对每个单元格点击
@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;
}
- 针对一列添加
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>
实现效果