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

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

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

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

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

相关推荐
梁辰兴15 小时前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
军军君011 天前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
海天胜景2 天前
vue3 el-table动态表头
javascript·vue.js·elementui
我在北京coding3 天前
el-tree 懒加载 loadNode
前端·vue.js·elementui
布兰妮甜4 天前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
鱼 空4 天前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
ruanhongbiao4 天前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
Rainbow_Pearl5 天前
Vue2_element 表头查询功能
javascript·vue.js·elementui
布兰妮甜5 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
木依5 天前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui