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

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

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

下面是一个更新后的示例代码，演示如何在 Element-Plus 的表格中实现点击当前行获取数据并在当前行下方显示数据的功能：

javascript 复制代码

<template>
  <div>
    <el-table
      :data="tableData"
      @row-click="handleRowClick"
      ref="table"
    >
      <el-table-column
        prop="name"
        label="Name"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="Age"
      ></el-table-column>
    </el-table>

    <el-popover
      v-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" 可以实现展开行功能。以下是关于该功能的示例代码和注释：

javascript 复制代码

<!-- 在外层的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 中设置了展开行的插槽。通过这样的设置，您可以实现展开行的功能。接下来是对应的逻辑代码：

javascript 复制代码

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;
};

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！