Vue Element-UI 选择隐藏表格中的局部字段信息

一、功能需求分析

为什么需要这个功能？

（1）简化信息，减少混乱：

就像整理抽屉，只留下常用的东西，这样找起来更快，看起来也更整洁。在表格中，只展示需要的字段，可以让信息更加清晰，减少视觉上的混乱。

（2）提高工作效率：

如果每次打开表格都要在一堆不相关的信息中寻找关键数据，会浪费很多时间。选择展示所需字段，就像是用过滤器筛选出最重要的信息，让工作更高效。

（3）专注关键数据：

就像开车时只关注路标和交通信号，忽略其他无关的景物。在表格中，只展示关键字段，可以帮助用户集中注意力，做出更准确的决策。

二、实现效果

通过点击显示列，在此选择需要显示的字段

 显示的效果：（没有被勾选的列，就这样被隐藏啦！）

三、实现页面代码

<template>
  <div>
    <el-button type="primary" @click="selectDisplayColumn">显示列</el-button>

    <!-- 选择需要显示字段卡片 -->
    <el-card v-if="displayCard"  class="dialog-card">
      <div slot="header">
        <span>选择需要显示的字段信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close" @click="displayCard = false" />
      </div>
        <el-checkbox v-for="(row, index) in tableFields" :key="index"  v-model="row.display">{{ row.label }}</el-checkbox>
    </el-card>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column v-if="tableFields[0].display" prop="date" label="日期" width="100"/>
      <el-table-column v-if="tableFields[1].display" prop="name" label="姓名" width="100"/>
      <el-table-column v-if="tableFields[2].display" prop="address" label="地址" width="220"/>
      <el-table-column v-if="tableFields[3].display" prop="age" label="年龄" width="60"/>
      <el-table-column v-if="tableFields[4].display" prop="email" label="邮箱" width="220"/>
      <el-table-column v-if="tableFields[5].display" prop="phone" label="电话" width="100"/>
      <el-table-column v-if="tableFields[6].display" prop="company" label="公司" width="100"/>
      <el-table-column v-if="tableFields[7].display" prop="city" label="城市" width="100"/>
      <el-table-column v-if="tableFields[8].display" prop="country" label="国家" width="100"/>
      <el-table-column v-if="tableFields[9].display" prop="postalCode" label="邮编" width="100"/>
      <el-table-column v-if="tableFields[10].display" prop="website" label="网站" width="200"/>
    </el-table>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        displayCard:false,
        tableFields: [
      {
        name: 'date',
        label: '日期',
        display: true
      },
      {
        name: 'name',
        label: '姓名',
        display: true
      },
      {
        name: 'address',
        label: '地址',
        display: true
      },
      {
        name: 'age',
        label: '年龄',
        display: true
      },
      {
        name: 'email',
        label: '邮箱',
        display: true
      },
      {
        name: 'phone',
        label: '电话',
        display: true
      },
      {
        name: 'company',
        label: '公司',
        display: true
      },
      {
        name: 'city',
        label: '城市',
        display: true
      },
      {
        name: 'country',
        label: '国家',
        display: true
      },
      {
        name: 'postalCode',
        label: '邮编',
        display: true
      },
      {
        name: 'website',
        label: '网站',
        display: true
      }
    ],
    tableData: [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        age: 28,
        email: 'wangxiaohu@example.com',
        phone: '1234567890',
        company: '科技有限公司',
        city: '上海',
        country: '中国',
        postalCode: '200333',
        website: 'http://example.com'
      },
      // 添加更多数据项
      {
        date: '2016-05-04',
        name: '李四',
        address: '上海市普陀区金沙江路 1517 弄',
        age: 24,
        email: 'lisi@example.com',
        phone: '0987654321',
        company: '网络科技',
        city: '北京',
        country: '中国',
        postalCode: '100000',
        website: 'http://example.com'
      },
      {
        date: '2016-05-01',
        name: '张三',
        address: '上海市普陀区金沙江路 1519 弄',
        age: 32,
        email: 'zhangsan@example.com',
        phone: '1122334455',
        company: '信息技术',
        city: '广州',
        country: '中国',
        postalCode: '510000',
        website: 'http://example.com'
      },
      {
        date: '2016-05-03',
        name: '赵六',
        address: '上海市普陀区金沙江路 1516 弄',
        age: 29,
        email: 'zhaoliu@example.com',
        phone: '5566778899',
        company: '电子科技',
        city: '深圳',
        country: '中国',
        postalCode: '518000',
        website: 'http://example.com'
      }
    ]
      }
    },
    methods:{
      selectDisplayColumn(){
        this.displayCard = !this.displayCard;
      }
    }
  }
</script>

<style>
.dialog-card {
  width: 480px;
  position: fixed;
  top: 100px;
  left: 350px;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

</style>