elementui table 嵌入复选框
时间: 2025-02-02 17:47:41 浏览: 55
### 如何在 ElementUI Table 组件中添加复选框列
为了实现在 `ElementUI` 表格组件中加入复选框的功能,可以利用内置的选择列功能。通过设置属性 `selection` 来启用这一特性。
下面是一个简单的例子来展示如何配置带有复选框的表格:
```html
<template>
<div>
<!-- 使用 el-table-column 的 type 属性为 selection 添加复选框 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column> <!-- 复选框列 -->
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<!-- 控制已选项 -->
<div style="margin-top: 20px;">
已选择 {{ selectedRows.length }} 项
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
{ date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' }
],
selectedRows: [] // 存储被选中的行数据
};
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
};
</script>
```
上述代码展示了创建一个具有复选框列的表格的方法[^1]。当用户点击任意一行前面的小方块时,该行即会被标记为选定状态;同时可以通过监听事件 `@selection-change` 来追踪当前已被选取的数据条目,并更新到变量 `selectedRows` 中以便后续处理逻辑使用。
阅读全文
相关推荐


















