Edited at

【メモ】Vue.js + Element UIのtableでrow-click Table Eventsでクリックされたrowのデータを取得する方法

Element UIのTableで row-click が行われた時に登録されていたハンドラ側でrowの値を受け取る方法のメモ。


方法

普通に row-clickイベントに登録した method の引数としてクリックしたrowの値を受け取ることができる。


実装


<template>
<el-table
:data="tableData"
  @row-click="handleClick">
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="age"
label="Age">
</el-table-column>
</el-table>
</template>

<script>
export default {
data() {
return {
tableData: [{
name: '太郎',
age: 25
}, {
name: '二郎',
age: 26,
}]
}
},
methods: {
handleClick(val) {
console.log(`val = ${JSON.stringify(val)}`)
}
}
};
</script>


結果


val = {"name":"太郎","age":25}


参考にさせていただいたサイト

Component | Element