vue中在下方显示所选中的表格内容

要在下方显示所选中的表格内容，你可以使用以下步骤：

1. 在表格中添加一个 `@row-click` 事件监听器，用于捕获所选行的数据。

<el-table :data="tableData" @row-click="handleRowClick">
  <!-- 表格列定义 -->
</el-table>

2. 在 Vue 实例中定义 `handleRowClick` 方法，该方法将所选行的数据存储在某个变量中，以便在下方显示。

data() {
  return {
    selectedRow: null, // 存储所选行的数据
    // 表格数据
    tableData: [
      { id: 1, name: 'John', age: 20 },
      { id: 2, name: 'Mary', age: 25 },
      { id: 3, name: 'Tom', age: 30 }
    ]
  };
},
methods: {
  handleRowClick(row) {
    this.selectedRow = row; // 存储所选行的数据
  }
}

3. 在页面中添加一个元素，用于显示所选行的数据。

<div>
  <el-table :data="tableData" @row-click="handleRowClick">
    <!-- 表格列定义 -->
  </el-table>
  <div v-if="selectedRow">
    <p>所选行的数据：</p>
    <p>id: {{ selectedRow.id }}</p>
    <p>name: {{ selectedRow.name }}</p>
    <<p>age: {{ selectedRow.age }}</p>
  </div>
</div>

现在，当你在表格中选择一行时，所选行的数据将显示在页面的下方。