Vue 通过后端传回的id让el-table表格对应行选中
时间: 2024-01-05 07:04:11 浏览: 220
获取el-table表格中选中行的数据
好的,针对你的问题,你可以在Vue中通过绑定变量来实现el-table表格对应行选中。具体的操作步骤如下:
1. 在Vue的data中定义一个变量,比如叫做selectedRow,用来存储选中的行的id。
2. 在el-table组件的定义中,通过v-bind指令将selectedRow变量和当前行的id绑定起来。具体的代码如下所示:
```
<el-table
:data="tableData"
@row-click="handleRowClick"
:highlight-current-row="true"
:current-row-key="selectedRow"
>
```
其中,row-click事件会在点击某一行时触发,handleRowClick方法会将当前行的id赋值给selectedRow变量。highlight-current-row属性用来设置是否高亮当前行,current-row-key属性则用来设置当前选中行的id。
3. 在handleRowClick方法中,将当前行的id赋值给selectedRow变量,代码如下所示:
```
methods: {
handleRowClick(row) {
this.selectedRow = row.id;
}
}
```
这样,当你点击某一行时,就会触发handleRowClick方法,将当前行的id赋值给selectedRow变量。而el-table组件会根据current-row-key属性来高亮选中行,从而实现表格对应行的选中。
阅读全文