Element-plus点击当前行之后获取数据显示跟随行数据

在使用Element-plus的表格组件（<el-table>）时，可以通过监听row-click事件来获取用户点击的当前行数据。以下是一个简单的例子，展示了如何在点击表格行后获取并显示该行的数据。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @row-click="handleRowClick"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
  <div>
    <p>选中行数据：</p>
    <p>{{ selectedRow }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...更多数据
      ],
      selectedRow: null
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      this.selectedRow = row;
    }
  }
};
</script>

在这个例子中，handleRowClick方法会在用户点击表格行时被调用，并接收当前点击的行数据row作为参数。我们将这个行数据赋值给selectedRow数据属性，然后在模板中通过{{ selectedRow }}展示选中行的数据。