前言

在日常办公中，我们经常需要操作各种表格。然而，当表格数据过多时，表头往往会挤占宝贵的屏幕空间，给我们的工作带来不便。那么，如何实现动态控制表头的显隐呢？本文将为大家详细介绍。

如何实现？

本章节用的组件

Popover 弹出框
Checkbox 多选框
Button 按钮
Table 表格

实现思路

首先，我们需要用到多选框组去绑定表头的值，通过 reference 触发 Popover 显示的 HTML 元素；
其次，通过 v-if="数组[下标].状态" 给表格的每一列绑定上动态的状态，以此判断表格的每一列是否显隐；
最后，当我们勾选或者取消勾选选框时，通过 filter 方法对数组进行过滤，再利用 indexOf 方法的特性让其每一列的状态更新（true 或者 false）即可。

话不多说，下面直接看实例代码

完整源码

<template><div class="containerBox"><!-- Popover 弹出框 --><div class="tabControlBox"><el-popover placement="right" trigger="click"><el-checkbox-group v-model="colOptions"><el-checkbox v-for="item in colSelect" :label="item" :key="item" @change="columnChange"></el-checkbox></el-checkbox-group><!-- reference   触发 Popover 显示的 HTML 元素 --><el-button icon="el-icon-menu" type="info" size="mini" slot="reference">显示列</el-button></el-popover></div><!-- Table 表格 --><div class="tableBox"><el-table :data="tableData" border><el-table-column label="姓名" v-if="colData[0].ishide" prop="name"></el-table-column><el-table-column label="性别" v-if="colData[1].ishide" prop="sex"></el-table-column><el-table-column label="年龄" v-if="colData[2].ishide" prop="age"></el-table-column><el-table-column label="电话" v-if="colData[3].ishide" prop="phone"></el-table-column><el-table-column label="邮箱" v-if="colData[4].ishide" prop="email"></el-table-column><el-table-column label="学历" v-if="colData[5].ishide" prop="education"></el-table-column><el-table-column label="职业" v-if="colData[6].ishide" prop="occupation"></el-table-column><el-table-column label="地址" v-if="colData[7].ishide" prop="site"></el-table-column></el-table></div></div>
</template><script>
export default {data() {return {// 模拟表格数据tableData: [{name: "小红",sex: "女",age: "20",phone: "177****8810",email: "2901626033@qq.com",education: "本科",occupation: "前端开发",site: "北京昌平",},],//动态显示列colData: [{ title: "姓名", ishide: true },{ title: "性别", ishide: true },{ title: "年龄", ishide: true },{ title: "电话", ishide: true },{ title: "邮箱", ishide: false },{ title: "学历", ishide: true },{ title: "职业", ishide: false },{ title: "地址", ishide: true },],// 多选框绑定值colOptions: ["姓名", "性别", "年龄", "电话", "学历", "地址"],// 多选框展示的值colSelect: ["姓名","性别","年龄","电话","邮箱","学历","职业","地址"],};},methods: {//动态显示列columnChange() {this.colData.filter((i) => {if (this.colOptions.indexOf(i.title) !== -1) {i.ishide = true;} else {i.ishide = false;}});},},
};
</script><style scoped>
.containerBox {padding: 20px;
}
.tabControlBox {margin-bottom: 10px;
}
</style>

实现效果

拓展

filter() 方法通过检查指定数组中符合条件的所有元素，filter()方法不会改变原始数组。

参数	描述
参数1	必须。当前元素的值。
参数2	可选。当前元素的索引值。
参数3	可选。当前元素属于的数组对象。

简单实例

let array = [{ id: 1, name: "小红" },{ id: 2, name: "小黄" },{ id: 3, name: "小兰" },{ id: 4, name: "小绿" },];
let fil = array.filter((item) => item.id != 1); // 查找数组中id不等于1的对象
console.log(fil); // [{id: 2, name: '小黄'},{id: 3, name: '小兰'},{id: 4, name: '小绿'}]

indexOf() 方法可以返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1。

参数	描述
参数1	必须。要查找的字符串的值(e)。
参数2	可选。整数。在字符串的第几个位置(5)开始查找字符(e)第一次出现的位置，如省略该参数，则将从字符串的首字符开始检索。

简单实例

var str = 'Hello world, welcome to the universe';
var det = str.indexOf('e', 5); // 在字符串第五个位置开始查找字符'e'第一次出现的位置
console.log(det); // 14

动态控制表格表头显隐，让表格变得更加智能相关推荐

php 点击表头排序,TP5+ajax实现点击表格表头切换排序，带分页
TP5+ajax实现点击表格表头切换排序,带分页 2018-08-15 14:59:06ThinkPHP php接收页码请求的地址 /** * ajax 无刷新分页 * param $page int ...
qt 表格表头嵌入全选全不选_6个word表格基础操作，看了再说会不会
点击上面△蓝字 ,关注职领 Office 记得坚持打卡哦~ 本期小编要给大家分享一些word表格的基本技巧,希望对各位有帮助,话不多说,上菜! 01 快速对单元格进行合并与拆分在Excel中,单元格 ...
easyui datagrid 多表头数据错位_表格数据检索（二）
企业级中后台产品通常大量使用表格来展示结构化的数据,对表格数据进行检索,是一个常用功能.在日常设计工作中,我们经常不加思考便产出一个个带有表格数据检索功能的页面.然而,体验良好的表格数据检索功能,需要 ...
html.编辑数据回显,从HTML表格编辑/更新MySQL数据库值
我有一个表单,目前提交值到MySQL数据库.在每次提交完成后,刚刚插入到mysql数据库的数据将在表单下回显.该表格具有动态输入字段.我知道想要添加编辑以前插入的值的可能性.我放置了一个编辑按钮,将用 ...
css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...
elementUI table 表格表头居中颜色、内容居左
设置表格表头居中颜色 : header-cell-style="{'text-align':'center',color: '#000',}" 设置表格内容 : align=&q ...
php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...

动态控制表格表头显隐，让表格变得更加智能

前言

如何实现？

完整源码

拓展

动态控制表格表头显隐，让表格变得更加智能相关推荐

最新文章

热门文章