vue 中 el-table-column type="selection" 具体用法
时间: 2023-09-25 19:12:20 浏览: 1916
`<el-table-column>` 组件的 `type="selection"` 属性可以用于实现表格中的多选功能。具体用法如下:
1. 在 `el-table` 组件中设置 `show-checkbox` 属性为 `true`,表示显示复选框。
```html
<el-table :data="tableData" :show-checkbox="true">
<!-- 列定义 -->
</el-table>
```
2. 在 `el-table-column` 组件中设置 `type="selection"` 属性,表示该列是多选列。
```html
<el-table :data="tableData" :show-checkbox="true">
<el-table-column type="selection"></el-table-column>
<!-- 列定义 -->
</el-table>
```
这样,就会在表格中显示一个多选列,用户可以通过多选列的复选框来选择多个行数据。在表格的 `selection-change` 事件中,可以获取到当前选中的行数据。
```html
<el-table :data="tableData" :show-checkbox="true" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<!-- 列定义 -->
</el-table>
```
```javascript
methods: {
handleSelectionChange(selection) {
console.log(selection); // 当前选中的行数据
}
}
```
阅读全文