element-ui table多选CheckBox参数解析
时间: 2023-07-05 15:32:41 浏览: 89
当使用 Element UI 的 table 组件进行多选时,可以在列定义中设置 `type` 属性为 `selection`,这将会在表格中显示出一个复选框列。当用户勾选了其中的某些行时,可以通过 `@selection-change` 事件来获取当前选中的行数据,如下所示:
```html
<el-table
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
</el-table>
```
```js
methods: {
handleSelectionChange(selection) {
console.log(selection)
}
}
```
在 `handleSelectionChange` 方法中,`selection` 参数是一个包含已选择行数据的数组。如果需要获取选中行的索引,可以在 `el-table` 上设置 `row-key` 属性,并在 `selection-change` 事件中通过 `selection.map(item => this.$refs.table.$data.indexOf(item))` 获取。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)