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

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')">筛选