el-table点击某一行选中
时间: 2023-10-14 17:07:11 浏览: 331
获取el-table表格中选中行的数据
要实现 el-table 点击某一行选中的功能,可以使用以下步骤:
1. 添加一个字段 selectedRow,用来保存当前选中的行。
2. 在 el-table 标签中添加 @row-click 事件,当用户点击某一行时触发该事件。
3. 在事件处理函数中,将当前点击的行赋值给 selectedRow 字段。
4. 在 el-table 的每一行中添加 :highlight-row="selectedRow === row" 属性,用来判断是否高亮显示当前选中的行。
代码示例:
```
<template>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
selectedRow: null
}
},
methods: {
handleRowClick(row) {
this.selectedRow = row
}
}
}
</script>
```
在上面的代码中,@row-click="handleRowClick" 绑定了点击事件,handleRowClick 方法将点击的行赋值给 selectedRow。同时,在 el-table 的每一行中添加了 :highlight-row="selectedRow === row" 属性,用来判断是否高亮显示当前选中的行。
阅读全文