当前位置：首页 > news >正文

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

news 2025/7/12 8:41:57

要实现点击当前行后，在当前行的下方显示数据，可以通过以下步骤来实现：

在表格的行点击事件中获取当前点击行的位置信息。
根据位置信息动态计算并设置需要显示数据区域的位置。

下面是一个更新后的示例代码，演示如何在 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;
};