vue+elmentUi实现table列筛选动态展示功能

最新推荐文章于 2025-06-16 16:38:00 发布

小男哥、

最新推荐文章于 2025-06-16 16:38:00 发布

阅读量4.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/EnjoyLearning_zn/article/details/108026012

本文介绍如何利用Vue和ElementUI实现表格列的动态筛选功能。通过for循环展示列，使用Popover弹出框进行筛选操作，点击后用户可以选择条件，实现所需列的动态显示。最终效果为，当获取到后台数据后，用户可以通过筛选功能查看特定列的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table列筛动态选展示功能的实现

前言：用过elementUi的小伙伴都知道，用它配合vue来写前端页面是很爽的，在大多数情况下，直接拿过来使用就能满足产品需求。就拿table组件来说，从简单的表格展示到到复杂自定义，开发者把很多可能涉及到的场景都考虑了进来。但是细心的你可能会发现，在使用table组件的时候，行是动态加载的，很多的操作都是对行进行的，而列是在一开始使用的时候要展示哪些列就写死了，如果展示的列很多，就算使用了固定列啥的冻结，用户在操作的时候依然会有很多不便，那么能不能通过筛选操作动态的展示想要看到的列数据呢？comme on，我们一起来看看吧！

首先使用table组件正常展示表格数据，把本来要写死的列通过for循环展示：

<el-table :data="tableData" border style="position: relative;">
  <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
  <el-table-column v-for="(col,index) in colums" :key="index" align="center"
   :prop="col" :label="col">
  </el-table-column>
 </el-table>

结果发现表格数据展示正常：

在这里插入图片描述

然后使用Popover弹出框实现点击弹出筛选项，进行筛选操作：

<template>
  <div class="containClass">分类
    <h3 class="title">列动态展示table案例</h3>
    <el-popover
      placement="bottom"
      width="150"
      trigger="click">
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="item" v-for="(item, i) in checkLabels" :key="i" style="display: block;"></el-checkbox>
        </el-checkbox-group>
        <span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('filter')">筛选</span>
        <span v-show