- 首先在el-table中绑定row-key,并且设置ref属性
<el-table ref="DeviceTable" v-loading="loading" :data="list" :row-key="getRowKeys" @selection-change="handleSelectionChange">
- 然后在选择项的一列绑定reserve-selection=“true”
<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
- 在methods中写入绑定的row-key方法getRowKeys
methods: {
getRowKeys(row) {return row.id},
handleSelectionChange(val) {
this.multipleSelection = val
},
}
- 将请求回来需要选中数据或者指定要选中的数据进行遍历,调用toggleRowSelection选中
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/68ad4e758174dc4282162131b48df181.png)
this.$refs.DeviceTable.toggleRowSelection(row, true);
- 最后可以调用clearSelection方法清空已选项,在需要清除的地方加入以下代码
this.$refs.DeviceTable.clearSelection();