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="!canDo" class="disabledClass">筛选</span>
        <span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('cancel')">取消</span>
        <span v-show="!canDo" class="disabledClass">取消</span>
        <span></span>
        <span class="filterClass" slot="reference">筛选
          <i class="fa fa-filter"></i>
        </span>
    </el-popover>
    <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>
  </div>
</template>

点击筛选后，页面可进行条件选择，效果展示如下：

加入js操作代码，最中全部代码如下：

<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="!canDo" class="disabledClass">筛选</span>
        <span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('cancel')">取消</span>
        <span v-show="!canDo" class="disabledClass">取消</span>
        <span></span>
        <span class="filterClass" slot="reference">筛选
          <i class="fa fa-filter"></i>
        </span>
    </el-popover>
    <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>
  </div>
</template>
<script>
export default {
  name: 'Catelog',
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          salary: 10000
        },
        {
          date: '2016-05-04',
          name: '张小龙',
          address: '上海市普陀区金沙江路 1517 弄',
          salary: 12000
        },
        {
          date: '2016-05-01',
          name: '赵小牛',
          address: '上海市普陀区金沙江路 1519 弄',
          salary: 9000
        },
        {
          date: '2016-05-03',
          name: '李小狗',
          address: '上海市普陀区金沙江路 1516 弄',
          salary: 20000
        },
        {
          date: '2016-05-06',
          name: '孙小猪',
          address: '上海市普陀区金沙江路 1519 弄',
          salary: 5500
        }
      ],
      colums: [],
      checkLabels: [],
      checkList: []
    }
  },
  computed: {
    canDo () {
      return this.checkList.length > 0
    }
  },
  methods: {
    handlerFilterFunc (type) {
      console.log(type)
      if (type === 'filter') {
        this.colums = this.checkList
      } else if (type === 'cancel') {
        this.checkList = []
        this.colums = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])))
      }
    }
  },
  created () {
    this.checkLabels = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])))
    this.colums = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])))
  }
}

只要拿到后台返回的数据即可，最后功能效果如下：

小提示： 示例中的筛选按钮位置是随便放的，如果需求里面要求筛选功能放在某个列的名字旁边，只需要通过绝对定位放到需要的位置即可：

The End !