【メモ】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