vue中el-table选中
时间: 2024-12-31 15:45:01 浏览: 11
### Vue Element UI `el-table` 行选中实现方法
#### 定义表格并添加行选中功能
为了实现在 Vue 中使用 Element UI 的 `el-table` 组件来支持行选中,需要先引入必要的组件,并设置好基础结构。通过定义带有 `type="selection"` 的列可以启用多选框。
```html
<el-table
v-loading="loading"
:data="detailsList"
@selection-change="handleSelectionChange"
ref="myTable">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<!-- 其他列配置 -->
</el-table>
```
此部分代码创建了一个具有加载状态和数据绑定特性的表格,并监听了选择变化事件以便后续处理[^1]。
#### 处理选择变更事件
当用户的交互改变了所选项时会触发 `@selection-change` 事件,在该回调函数内可以通过参数获取当前被选中的记录列表:
```javascript
export default {
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
console.log('Selected Rows:', selection);
}
},
data() {
return {
selectedRows: []
};
}
}
```
上述 JavaScript 片段展示了如何捕获到最新的已选项目数组并将它们存储起来供其他逻辑调用。
#### 获取或清除现有选中项
如果想要程序化地操作哪些行应该处于选定状态,则可通过访问挂载后的 table 实例来进行控制。例如要清空所有高亮显示的选择,可以在适当的地方执行如下命令:
```javascript
this.$refs.myTable.clearSelection();
```
这段脚本利用 `$refs` 属性找到之前命名过的 `<el-table>` 组件实例 (`ref="myTable"`), 调用了其内置的方法 `clearSelection()` 来取消所有的勾选标记。
阅读全文