动态控制表格的表头显隐

前言

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

---

如何实现？

本章节用的组件

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

---

实现思路

当多选框的选项改变时，通过 columnChange 方法更新 colData 中每个列的 ishide 属性。如果多选框中的选项在 colData 中存在，将对应列的 ishide 属性设为 true，否则设为 false。然后，在表格中使用 v-if 指令根据 colData 中每个列的 ishide 属性来决定是否显示该列即可。

---

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

---

完整源码

<template>
  <div>
    
    <div class="popoverBox">
      <el-popover placement="right" trigger="click">
        <el-checkbox-group v-model="colOptions">
          <el-checkbox v-for="item in colData" :label="item.title" :key="item.title" @change="columnChange">{{ item.title }}el-checkbox>
        el-checkbox-group>
        
        <el-button icon="el-icon-menu" type="info" size="mini" slot="reference">显示列el-button>
      el-popover>
    div>
    
    <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: ["姓名", "性别", "年龄", "电话", "学历", "地址"],
    };
  },
  methods: {
    //动态显示列
    columnChange() {
      this.colData.forEach((item) => {
        if (this.colOptions.indexOf(item.title) !== -1) {
          item.ishide = true;
        } else {
          item.ishide = false;
        }
      });
    },
  },
};
script>

<style scoped>
.popoverBox {
  display: flex;
  justify-content: right;
  margin: 10px 0px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

---

实现效果

---

封装公共组件

封装组件

<template>
  <div class="popoverBox">
    <el-popover placement="right" trigger="click">
      <el-checkbox-group v-model="colOptions">
        <el-checkbox v-for="item in colData" :label="item.title" :key="item.title" @change="columnChange">{{ item.title }}el-checkbox>
      el-checkbox-group>
      <el-button icon="el-icon-menu" type="info" size="mini" slot="reference">{{ buttonText }}el-button>
    el-popover>
  div>
template>

<script>
export default {
  props: {
    colData: {
      type: Array,
      default: () => [],
    },
    buttonText: {
      type: String,
      default: "显示列",
    },
  },
  data() {
    return {
      // 用于存储选中的checkbox选项
      colOptions: this.colData
        .filter((item) => item.ishide === true)
        .map((item) => item.title),
    };
  },
  methods: {
    // 用于监听checkbox选项的变化
    columnChange() {
      this.colData.forEach((item) => {
        if (this.colOptions.indexOf(item.title) !== -1) {
          item.ishide = true;
        } else {
          item.ishide = false;
        }
      });
    },
  },
};
script>
<style scoped>
.popoverBox {
  display: flex;
  justify-content: right;
  margin: 10px 0px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

使用组件

<template>
  <div class="containerBox">
    
    <column-select :col-data="colData" :button-text="buttonText">column-select>
    
    <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>
import ColumnSelect from "@/components/columnSelect";

export default {
  components: {
    ColumnSelect,
  },
  data() {
    return {
      // 多选框展示的值
      buttonText: "显示列",
      // 模拟表格数据
      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 },
      ],
    };
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

---

拓展

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

简单实例

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: '小绿'}]

1
2
3
4

---

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

简单实例

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

1
2
3
4