vue中获取el-table中的selection的值
时间: 2024-04-24 10:27:15 浏览: 12
在Vue中获取el-table中的selection的值可以通过以下步骤实现:
1. 首先,在el-table标签中添加一个@selection-change事件,将其绑定到一个方法上,比如handleSelectCodeForTicket。在该方法中,可以通过参数val获取到当前选中的行的数据。
2. 在data中定义一个名为Selection的数组,用于存储选中的行的值。
3. 在handleSelectCodeForTicket方法中,将val中的每一项的code值添加到Selection数组中。
4. 最后,可以通过访问this.Selection来获取el-table中的selection的值。
以下是一个示例代码:
```html
<el-table @selection-change="handleSelectCodeForTicket" :data="tableData" :height="tableHeight">
<el-table-column type="selection" width="50"></el-table-column>
</el-table>
```
```javascript
data() {
return {
tableData: \[\], // el-table的数据
tableHeight: '', // el-table的高度
Selection: \[\] // 存储选中的行的值
}
},
methods: {
handleSelectCodeForTicket(val) {
console.log(val)
this.Selection = \[\]
val.forEach(v => {
this.Selection.push(v.code)
})
}
}
```
通过访问this.Selection,你可以获取到el-table中的selection的值。
#### 引用[.reference_title]
- *1* [el-table,el-table-column,selection,获取多选选中的数据](https://blog.csdn.net/xx820702/article/details/126031090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]