制作一个可筛选列的表格

因为项目需要，我们经常拉取完后台的列表数据发现，列表撑的很长，即使是使用了表格的流体宽度，还是有点多，而且看起来也不方便，那么这个时候，一个可以变化列的表格就成了首要的选择，让我们在操作和查看数据的时候方便许多。还是老规矩，给大家上图先。

QQ截图20201110160338.png

如图，我们取消了选择日期和状态两个列，在详情后面，紧跟着的就是我们的图标列了，这个骚操作是不是还可以呀？
这个页面没有封装成组件，但是数据什么的都是基于之前的表头数据，有兴趣的同学可以进一步封装成组件，美观性也自我去调节即可。
先看看我们的布局。

<template>
    <div class="pages-container">
        <el-row>
          <el-col :span="2">
                <el-popover
                        placement="bottom"
                        title="筛选表格"
                        trigger="click">
                    <el-checkbox-group v-model="checkList" @change="changeCheck">
                        //我们用表头来循环出选择框，并给每个表头数据加一个show的Boolean状态
                        <ul class="checkList">
                            <li v-for="(item,index) in tableHeader"><el-checkbox :label="item.label" :key="index">{{item.label}}</el-checkbox></li>
                        </ul>
                    </el-checkbox-group>
                    <el-button type="primary" size="mini" slot="reference">高级筛选</el-button>
                </el-popover>
            </el-col>
          <el-col :span="22">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="审批人">
                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="formInline.region" placeholder="活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <dynamic-table :tableHeader="tableHeader" :tableData="tableData" :config="config" @pagechange="getList($event)">
                    <template v-slot:handles="t">
                        <el-button-group>
                            <el-link type="primary" @click="edit(t)" icon="el-icon-edit">编辑</el-link>
                            <el-link type="danger" @click="deleteId(t)">删除<i class="el-icon-delete el-icon--right"></i> </el-link>
                        </el-button-group>
                    </template>
                </dynamic-table>
            </el-col>
        </el-row>
    </div>
</template>

我们先来个两列布局，为了方便查看，我们就先用Popover的方式来展示了，应用到项目里大家可以做成更好的展现方式。
因为我们的复选框是基于表头数据循环出来的，我们看我们的表头数据

//我们看到，这里每一个表头属性都添加了一个show的状态，用于控制列的显示隐藏
export const tableHeader = [
    {
        show:false,
        type:'selection',//渲染的表格行内数据类型
        width:'55',//表格列所占宽度
        label:'选择',//表格列名
        align:'center',//表格列数据对其方式
        fixed:false,
    },
    {
        show:false,
        prop:'createAdress',//字段
        label:'地址',//表格列名
        width:'200',
        align:'center',//表格列数据对其方式
    }
]

然后我们再对表格组件的遍历进行条件判断

<!--为了方便查看，减去了一些之前判断表格行类型的代码 -->
<template>
    <div>
        <el-table
            class="customer"
            :data="tableData"
            style="width: 100%">
            <!-- 循环表头数据，判断列显示类型 -->
            <template v-for="(col,index) in tableHeader">
                //我们这里通过show来控制表头
                <template v-if="col.show">
                    <!-- 多选框 -->
                    <el-table-column v-if="col.type == 'selection'" :label="col.label" :type="col.type" :width="col.width"></el-table-column>
                    <!-- 索引行 -->
                </template>
            </template>
        </el-table>
        <pagination v-show="config.total>0" :total="config.total" v-on="$listeners" :page.sync="config.searchList.page" :entry.sync="config.searchList.pageSize" />
    </div>
</template>

看到这里，我们大概心里就有数儿了，只需要把checkbox选择的数据和我们的表头数据进行筛选，然后给show一个状态更新，就能完成我们的表头控制了
下面呈上核心代码

//因为之前有过代码展示，这里不需要用到的代码有所删减，只粘贴本章用到的
import {tableHeader} from './const.js'
export default {
        data() {
            return {
                tableHeader: tableHeader,
                checkList:[],
            }
        },
        mounted() {
            this.configColumn();
        },
        methods: {
            //页面渲染时，给所有的表头里的show附上一个选中的状态，然后把checkbox全部点亮-----表头中的所有label属性push进绑定的checkList数组就好了
            configColumn(){
                this.checkList = [];
                this.tableHeader.forEach((item,index)=>{
                    item.show = true;
                    this.checkList.push(item.label)
                })
            },
            //当我们改变选择时，我们进行筛选查找，先找到没有被选中的数据，返回到
            //result数组中，然后再从表头中遍历，找到满足条件的那个女人，改变她的婚姻状态即可
            changeCheck(val) {
                if(val.length>0){
                    var result = this.tableHeader.filter(item=>{
                        return val.indexOf(item.label) === -1 // 利用filter方法来遍历是否有相同的元素
                    })
                    this.tableHeader.forEach( (all,index) => {
                        if(result.find( nochecked => all.label === nochecked.label)){
                            all.show = false;
                        }else{
                            all.show = true;
                        }
                    })
                };
            }
        }
    }
</script>

基本思路都写在代码注释里面了。到这里，我们的一个列表列状态展示功能就完成了，实现我们自己的本地筛选，方便你我他。
感觉对你有用的小伙伴儿，麻烦给个小心心，码文不易，给个赞吧，谢谢您嘞！