Vue 通过后端传回的id让el-table表格对应行默认选中
时间: 2024-01-05 21:04:11 浏览: 207
获取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. 在Vue的mounted生命周期钩子函数中,从后端获取默认选中的行的id,将其赋值给selectedRow变量即可。具体的代码如下所示:
```
mounted() {
// 从后端获取默认选中的行的id
const defaultSelectedRowId = someApi.getDefautSelectedRowId();
// 将获取到的id赋值给selectedRow变量
this.selectedRow = defaultSelectedRowId;
}
```
这样,当页面渲染完成后,el-table组件就会根据current-row-key属性来默认选中对应的行,从而实现表格对应行的默认选中。
阅读全文