因为项目需要，我们经常拉取完后台的列表数据发现，列表撑的很长，即使是使用了表格的流体宽度，还是有点多，而且看起来也不方便，那么这个时候，一个可以变化列的表格就成了首要的选择，让我们在操作和查看数据的时候方便许多。还是老规矩，给大家上图先。
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>
基本思路都写在代码注释里面了。到这里，我们的一个列表列状态展示功能就完成了，实现我们自己的本地筛选，方便你我他。
感觉对你有用的小伙伴儿，麻烦给个小心心，码文不易，给个赞吧，谢谢您嘞！
网友评论