el-table和popover组合使用

在这篇文章中，我们将探讨如何使用 Vue3 和 Element Plus 实现一个可点击的表格单元格，并在点击时显示弹出层。我们将逐步解析示例代码的每个部分，并解释其功能。

element-plus 提供虚拟触发

<template>
    <div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180">
                <template #default="scope">
                    <!-- 点击名称单元格时触发 handleRef 函数 -->
                    <div
                        :ref="el => (refMap[scope.$index + '-name'] = el)"
                        @click="handleRef(refMap[scope.$index + '-name'], scope.row, 1)"
                    >
                        {{ scope.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="Address">
                <template #default="scope">
                    <!-- 点击地址单元格时触发 handleRef 函数 -->
                    <div
                        :ref="el => (refMap[scope.$index + '-address'] = el)"
                        @click="handleRef(refMap[scope.$index + '-address'], scope.row, 2)"
                    >
                        {{ scope.row.address }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- Element Plus 弹出层组件 -->
        <el-popover
            effect="dark"
            v-model:visible="visiblePopover"
            :virtual-ref="tempRef"
            virtual-triggering
            :width="popoverWidth"
        >
            <div v-if="popoverType === 1">我是name</div>
            <div v-if="popoverType === 2">我是address</div>
        </el-popover>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'

// 用于存储表格单元格的引用
const refMap = ref({})

// 弹出层的引用和状态
const tempRef = ref()
const visiblePopover = ref(false)
const selectedRow = ref({})
const popoverType = ref(0)

// 弹出层的宽度根据类型动态计算
const popoverWidth = computed(() => ({ 1: 500 })[popoverType.value] || 150)

// 表格数据
const tableData = ref([
    { id: 1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
    { id: 2, date: '2016-05-02', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles' },
    { id: 3, date: '2016-05-04', name: 'Tom2', address: 'No. 189, Grove St, Los Angeles' },
    { id: 4, date: '2016-05-01', name: 'Tom3', address: 'No. 189, Grove St, Los Angeles' },
])

// 处理单元格点击事件
const handleRef = (ref, row, type) => {
    tempRef.value = ref // 设置弹出层的参考元素
    popoverType.value = type // 设置弹出层的类型
    selectedRow.value = row // 设置当前选中的行
    visiblePopover.value = true // 显示弹出层
}
</script>

<style lang="less" scoped></style>

1. 模板部分:

   • 使用 el-table 组件显示表格数据。
   • 每一列的单元格通过 template 插槽自定义，允许在点击时触发弹出层。
   • 使用 :ref 动态绑定 ref，结合索引和字段名称创建唯一的引用标识。
   • 弹出层 el-popover 根据点击的单元格显示不同的内容。

2. 脚本部分:

   • refMap 用于存储各单元格的引用，以便于弹出层定位。
   • tempRef 保存当前需要显示的弹出层的触发元素。
   • visiblePopover 控制弹出层的显示和隐藏。
   • popoverType 决定弹出层显示的内容类型。
   • handleRef 函数处理单元格点击事件，更新弹出层的状态和内容。

轻松解决el-table 和el-popver 在数据过多的时候的卡顿问题，我们可以创建一个灵活且易于使用的表格组件，用户点击单元格时能够动态展示相关信息。这种方法提升了用户交互体验，使得信息展示更加直观和直观。希望这篇文章对你在开发过程中有所帮助！