VUE中获取TABLE的SELECTION选中的数据

table绑定一列type为selection,绑定table中的@selection-change=“selectionLineChangeHandle”,每次点击触发事件,赋值给数组,最后提交时候遍历获取需要的值

table绑定@selection-change事件

  <el-table 
      :data="dataonLineList"
      border
      @selection-change="selectionLineChangeHandle"
      style="width: 100%;">
  • table中定义一列type为selection

 <el-table-column
        type="selection"
      width="55">
      </el-table-column>
  • return中定义数组

 dataonLineListSelections: [],

methods中添加事件

selectionLineChangeHandle (val) {
       this.dataonLineListSelections = val
},

提交时遍历列表,获取对应的数据id是你表格里面绑定的列

//提交
fromCommit  () {
   console.log(this.dataonLineListSelections);
   for(var i = 0; i< this.dataonLineListSelections.length; i++){
         console.log('id:'+this.dataonLineListSelections[i].id)
       }
 }
Vue获取el-tableselection的值可以通过以下步骤实现: 1. 首先,在el-table标签添加一个@selection-change事件,将其绑定到一个方法上,比如handleSelectCodeForTicket。在该方法,可以通过参数val获取到当前选中的行的数据。 2. 在data定义一个名为Selection的数组,用于存储选中的行的值。 3. 在handleSelectCodeForTicket方法,将val的每一项的code值添加到Selection数组。 4. 最后,可以通过访问this.Selection获取el-tableselection的值。 以下是一个示例代码: ```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-tableselection的值。 #### 引用[.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 ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值