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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466998.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CANOE】【学习】【诊断功能】正响应抑制

文章目录 一、正响应抑制是什么&#xff1f;二.什么背景下产生三.作用四.如何实现五.capl代码如何实现总结diagGetSuppressRes 相关函数**Function Description****Syntax****Method (Dynamic)****Functionality****Parameters****Return Values****Availability****Example***…

纯血鸿蒙系统 HarmonyOS NEXT自动化测试实践

1、测试框架选择 hdc&#xff1a;类似 android 系统的 adb 命令&#xff0c;提供设备信息查询&#xff0c;包管理&#xff0c;调试相关的命令ohos.UiTest&#xff1a;鸿蒙 sdk 的一部分&#xff0c;类似 android sdk 里的uiautomator&#xff0c;基于 Accessibility 服务&…

基于vue3实现的聊天机器人前端(附代码)

<template><div class"container"><!-- 页面头部 --><header><h1>跟它说说话吧&#xff01;</h1><p>一个活泼的伙伴&#xff0c;为你提供情感支持&#xff01;</p></header><!-- 聊天容器 --><div c…

【赵渝强老师】Redis的RDB数据持久化

Redis 是内存数据库&#xff0c;如果不将内存中的数据库状态保存到磁盘&#xff0c;那么一旦服务器进程退出会造成服务器中的数据库状态也会消失。所以 Redis 提供了数据持久化功能。Redis支持两种方式的持久化&#xff0c;一种是RDB方式&#xff1b;另一种是AOF&#xff08;ap…

qt QFileSystemModel详解

1、概述 QFileSystemModel是Qt框架中的一个关键类&#xff0c;它继承自QAbstractItemModel&#xff0c;专门用于在Qt应用程序中展示文件系统的数据。这个模型提供了一个方便的接口&#xff0c;使得开发者可以轻松地在应用程序中集成文件和目录的树形结构&#xff0c;并通过视图…

ThingsBoard规则链节点:Push to Edge节点详解

引言 1. Push to Edge 节点简介 2. 节点配置 2.1 基本配置示例 3. 使用场景 3.1 边缘计算 3.2 本地数据处理 3.3 实时响应 4. 实际项目中的应用 4.1 项目背景 4.2 项目需求 4.3 实现步骤 5. 总结 引言 ThingsBoard 是一个开源的物联网平台&#xff0c;提供了设备管…

JavaScript 实现文本转语音功能

全篇大概2000 字&#xff08;含代码&#xff09;&#xff0c;建议阅读时间10分钟。 引言 我将向大家展示如何使用 JavaScript 和 Web Speech API 快速实现一个“文本转语音”的 Web 应用。通过这个教程&#xff0c;你将了解如何让浏览器将输入的文本朗读出来。 预览效果 一、…

动态规划理论基础和习题【力扣】【算法学习day.25】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…

Linux的基本指令(一)

1.ls指令 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及信息。 常用选项&#xff1a; -a列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -l列出文件的详细信息 举例&#xff1a; rooti…

智能化健身房管理:Spring Boot与Vue的创新解决方案

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

【Vue】简易博客项目跟做

项目框架搭建 1.使用vue create快速搭建vue项目 2.使用VC Code打开新生成的项目 端口号简单配置 修改vue.config.js文件&#xff0c;内容修改如下 所需库安装 npm install vue-resource --save --no-fund npm install vue-router3 --save --no-fund npm install axios --save …

Hadoop简介及单点伪分布式安装

目录 1. 大数据2. Hadoop简介3. Hadoop伪分布式安装4. Hadoop启动参考 1. 大数据 大数据的定义&#xff1a;一种规模大到在获取、存储、管理、分析方面大大超出传统数据库软件工具能力范围的数据集合。   特征&#xff1a;   1.海量的数据规模   2.快速的数据流转   3.…

windows server2019下载docker拉取redis等镜像并运行项目

一、基本概念 1、windows server 指由微软公司开发的“Windows”系列中的“服务器”版本。这意味着它是基于Windows操作系统的&#xff0c;但专门设计用于服务器环境&#xff0c;而不是普通的桌面或个人用户使用。主要用途包括服务器功能、用户和资源管理、虚拟化等 2、dock…

使用最新版的wvp和ZLMediaKit搭建Gb28181测试服务器

文章目录 说明安装1.安装nodejs简介安装步骤 2.安装java环境3.安装mysql安装修改密码 4.安装redis5.安装编译器6.安装cmake7.安装依赖库8.编译ZLMediaKit9.编译wvp-GB28181-pro 配置1.ZLMediaKit配置2.wvp-GB28181-pro配置2.1.配置ZLMediaKit连接信息2.2.28181服务器的配置2.3.…

Python程序设计 生成器

1. 基础概念 在讲迭代之前&#xff0c;先搞清楚这些名词&#xff1a; 循环&#xff08;loop&#xff09;&#xff0c;指的是在满足条件的情况下&#xff0c;重复执行同一段代码。比如&#xff0c;while 语句。迭代&#xff08;iterate&#xff09;&#xff0c;指的是按照某种…

mac m1 docker本地部署canal 监听mysql的binglog日志

mac m1 docker本地部署canal监听mysql的binglog日志(虚拟机同理) 根据黑马视频部署 1.docker 部署mysql 1.docker拉取mysql 镜像 因为m1是arm架构.需要多加一条信息 正常拉取 docker pull mysql:tagm1拉取 5.7的版本. tag需要自己指定版本 docker pull --platform linux/x…

[linux]docker基础

常见命令 Docker最常见的命令就是操作镜像、容器的命令&#xff0c;详见官方文档: Docker Docs 案例: 查看DockerHub&#xff0c;拉取Nginx镜像&#xff0c;创建并运行Nginx容器 在DockerHub中搜索Nginx镜像 拉取Nginx镜像 查看本地镜像列表 把镜像保持到本地 查看保持命令的…

C++builder中的人工智能(10)神经网络中的Sigmoid函数

在这篇文章中&#xff0c;我们将探讨最受欢迎的激活函数之一——Sigmoid函数。我们将解释什么是Logistic函数&#xff0c;以及它与Sigmoid函数的区别&#xff0c;并展示如何在C应用中使用这些函数。 目录 人工神经网络&#xff08;ANN&#xff09;中的激活函数是什么&#xff…

cursor:如何注销帐号和使用流量

点击右上角的设定图标 点击管理 在弹出的网页点登入 点”continue" 点SETING 了解最新信息请扫码关注&#xff1a;

如何选择适合小团队的项目管理工具?免费与开源软件推荐

目录 一、小团队项目管理工具的重要性 二、热门项目管理工具介绍 &#xff08;一&#xff09;禅道 &#xff08;二&#xff09;Trello &#xff08;三&#xff09;Asana &#xff08;四&#xff09;JIRA 三、免费项目管理软件推荐 &#xff08;一&#xff09;ES 管理器 …