Vue Element UI el-table expandClick 获取点击行行号

<template>
  <el-table
    :data="tableData"
    @expand-click="handleExpandClick"
    row-key="id"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <p>{{ props.row.$index }}</p>
      </template>
    </el-table-column>
    <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: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Bob', age: 30 }
      ]
    }
  },
  methods: {
    handleExpandClick(row, expandedRows) {
      console.log(row.$index);
    }
  }
}
</script>
<p>在上述代码中，<code>handleExpandClick</code>方法会在展开/收起行时被调用，并传入当前点击行的数据对象<code>row</code>和展开行的数据对象数组<code>expandedRows</code>。通过<code>row.$index</code>即可获取点击行的行号。</p>