End.

ElementUI表格Table,selection-change事件自定义传参

当我们使用表格组件,el-table的时候,开启selection选择框的时候,我们想要在选择变化事件粗发,传入自定义的参数数据。

如何实现呢?

默认:

<el-table
    ref="multipleTable"
    :data="prow"
    highlight-current-row
    tooltip-effect="dark"
    @selection-change="handleSelectionChange"
>   <el-table-column type="selection" width="45" />  # 省略代码....
</el-table>

handleSelectionChange(selection) { console.log('默认数据', selection)}


传入自定义数据。

@selection-change="handleSelectionChange($event, prow.id)"

$event是选中的这一行的值, prow.id是要传递的自定义数据,如下:

<el-table
    ref="multipleTable"
    :data="prow"
    highlight-current-row
    tooltip-effect="dark"
    @selection-change="handleSelectionChange($event, prow.id)"
>
   <el-table-column type="selection" width="45" />
  # 省略代码....
</el-table>

handleSelectionChange(selection, id) {
  console.log('默认数据', selection)  console.log('自定义传参数据', id)
}


至此,我们可以更加灵活实现各种业务需求了。

End.