前言

在日常辦公中，我們經常需要操作各種表格。然而，當表格數據過多時，表頭往往會擠占寶貴的屏幕空間，給我們的工作帶來不便。那么，如何實現動態控制表頭的顯隱呢？本文將為大家詳細介紹。

---

如何實現？

本章節用的組件

• 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

總結

以上是生活随笔為你收集整理的动态控制表格表头显隐，让表格变得更加智能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。