要實現點擊當前行后，在當前行的下方顯示數據，可以通過以下步驟來實現：
- 在表格的行點擊事件中獲取當前點擊行的位置信息。
- 根據位置信息動態計算并設置需要顯示數據區域的位置。
下面是一個更新后的示例代碼，演示如何在 Element-Plus 的表格中實現點擊當前行獲取數據并在當前行下方顯示數據的功能：
<template><div><el-table:data="tableData"@row-click="handleRowClick"ref="table"><el-table-columnprop="name"label="Name"></el-table-column><el-table-columnprop="age"label="Age"></el-table-column></el-table><el-popoverv-if="selectedRow"v-model="popoverVisible"trigger="manual"placement="bottom"width="200"><div><h2>Selected Row Data:</h2><p>Name: {{ selectedRow.name }}</p><p>Age: {{ selectedRow.age }}</p></div></el-popover></div>
</template><script>
export default {data() {return {tableData: [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 28 }],selectedRow: null,popoverVisible: false};},methods: {handleRowClick(row) {this.selectedRow = row;this.$nextTick(() => {const tableEl = this.$refs.table.$el;const rowEl = tableEl.querySelector(.el-table__body tr[data-row-key="${row._rowKey}"]);if (rowEl) {const rect = rowEl.getBoundingClientRect();const top = rect.top + rect.height + window.scrollY;this.$refs.popover.$refs.popper.style.top = ${top}px;}this.popoverVisible = true;});}}
};
</script>
在這個更新后的示例中，我們通過使用el-popover組件來在當前行下方顯示數據，同時在handleRowClick方法中動態計算并設置el-popover的位置，使其顯示在當前點擊行的下方。我們使用了$nextTick方法來確保在表格渲染完成后再計算位置信息，以確保能夠正確獲取行元素的位置。
通過這種方式，當用戶點擊表格的某一行時，會在當前行的下方顯示相應的數據信息，實現了在當前行下方顯示數據的效果。
在 Element Plus 的 el-table 中使用 el-table-column 的 type=“expand” 可以實現展開行功能。以下是關于該功能的示例代碼和注釋：
<!-- 在外層的table中設置關鍵屬性 -->
<el-table :data="tableList"style="width: 100%"@expand-change="expandColumn" :row-key="getRowKeys" :expand-row-keys="expands"
>
</el-table><!-- 在內層設置展開行的書寫插槽 -->
<el-table-column type="expand" fixed><template #default><!-- 書寫對應內容即可 --></template>
</el-table-column>
在以上示例代碼中，您可以看到如何在外層的 el-table 中設置了關鍵屬性，并在內層的 el-table-column 中設置了展開行的插槽。通過這樣的設置，您可以實現展開行的功能。接下來是對應的邏輯代碼：
let expandColumn = (row, expandedRows) => {// row 被點擊當前行的數據// expandedRows 存放頁面中被展開行的數據，對應的數組就是 expand-row-keys// 通過 expandedRows 的長度來判斷用戶是點擊展開還是折疊if (expandedRows.length) {// 展開expands.value = [];// 先干掉之前展開的行if (row) {expands.value.push(row.id); // push 新的行 (原理有點類似防抖)}} else {expands.value = []; // 折疊，清空 expand-row-keys 對應的數組}
};let getRowKeys = (row) => {// row 是當前行的數據// 給每行綁定唯一的標識return row.id;
};
以上就是文章全部內容了，如果喜歡這篇文章的話，還希望三連支持一下，感謝！
