vue elementui table组件中怎么添加一行多选框
时间: 2024-04-30 17:22:25 浏览: 81
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
可以在表格中的列定义中添加一个多选框列,示例代码如下:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
```
在这个例子中,我们在列定义中添加了一个 `type="selection"` 的列,这个列会在表格的左侧显示一个多选框,用户可以通过选中多选框来选择表格中的行。注意,这个列的 `prop` 属性没有定义,因为它不会显示任何数据,只是用来实现多选框的功能。
另外,需要注意的是,在使用多选框列的时候,需要在表格组件上添加 `@selection-change` 事件监听器来处理用户的选择操作:
```html
<template>
<el-table :data="tableData" style="width: 100%"
@selection-change="handleSelectionChange">
<!-- 列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// 表格数据
],
selectedRows: [] // 保存用户选择的行
};
},
methods: {
handleSelectionChange(selection) {
// 更新用户选择的行
this.selectedRows = selection;
}
}
};
</script>
```
在这个例子中,我们定义了一个 `selectedRows` 数组来保存用户选择的行,然后在 `@selection-change` 事件监听器中更新这个数组。你可以在监听器中执行任意的操作,比如更新表格中的数据、发送请求等。
阅读全文