vue element ui table表格--实现列的显示与隐藏

news2024/11/17 16:04:55

前言

实现效果
在这里插入图片描述


提示:代码段太简单就不解释了,自己看代码自己更改,下面代码直接无脑复制更改就行

一、实现代码?

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column fixed="right" width="100" align="center">
        <template slot="header">
          <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="showColumnOption"
          ></i>
        </template>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 配置列面板 -->
    <transition name="fade">
      <div class="columnOption" v-show="isShowColumn">
        <div class="content">
          <div class="head">选择显示字段</div>
          <div class="body">
            <el-checkbox v-model="checkList.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="checkList.name">姓名</el-checkbox>
            <el-checkbox v-model="checkList.provinces">省份</el-checkbox>
            <el-checkbox v-model="checkList.city">市区</el-checkbox>
            <el-checkbox v-model="checkList.adreess">地址</el-checkbox>
            <el-checkbox v-model="checkList.zipCode">邮编</el-checkbox>
          </div>
          <div class="footer">
            <el-button size="small" type="primary" plain @click="saveColumn"
              >保存列配置</el-button
            >
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowColumn: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      // 列的配置化对象,存储配置信息
      checkList: {},
      showColumn: {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      },
    };
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew); 
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下,否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    // 发请求得到checkListInitData的列的名字
    if(localStorage.getItem("columnSet")){
      this.checkList = JSON.parse(localStorage.getItem("columnSet"))
    }else{
      this.checkList = {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      };
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      localStorage.setItem("columnSet",JSON.stringify(this.checkList))
      this.isShowColumn = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.columnOption {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;
  .content {
    width: 100px;
    height: 100%;
    background-color: rgb(203, 223, 198);
    .head {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    .body {
      width: 100%;
      height: calc(100% - 88px);
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;
      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }
        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }
    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring 见解 7 基于注解的AOP控制事务

8.基于注解的AOP控制事务 8.1.拷贝上一章代码 8.2.applicationContext.xml <!-- 开启spring对注解事务的支持 --> <tx:annotation-driven transaction-manager"transactionManager"/> 8.3.service Service Transactional(readOnlytrue,propagation Pr…

学生用台灯对眼睛好吗?五款考研党台灯推荐

对于一名深耕家电多年的测评师&#xff0c;对于各品牌的台灯产品测评做了不少&#xff0c;本期我将给大家带来一期超全的热门护眼台灯深度测评。 据世界卫生组织最新研究报告称&#xff0c;我国近视患者人数多达6亿左右&#xff0c;几乎占据了中国总人口数量的一半&#xff0c;…

进程管理及计划任务

一、定义 程序&#xff1a;硬盘上躺着。执行特定任务的一串代码 进程&#xff1a;加载到内存中运行。进程是程序的副本&#xff0c;进程是有生命周期 进程的控制&#xff1a;每开启一个进程会消耗相应的硬件资源&#xff0c;内存&#xff0c;CPU&#xff0c;磁盘io 内存不足&am…

MongoDB高级集群架构设计

两地三中心集群架构设计 容灾级别 RPO & RTO RPO&#xff08;Recovery Point Objective&#xff09;&#xff1a;即数据恢复点目标&#xff0c;主要指的是业务系统所能容忍的数据丢失量。RTO&#xff08;Recovery Time Objective&#xff09;&#xff1a;即恢复时间目标&…

余震强度预测能力升级,Nature 刊文认证基于神经网络的模型性能优于传统模型

作者&#xff1a;李宝珠 编辑&#xff1a;李玮栋、xixi&#xff0c;三羊 地震的发生涉及诸多变量&#xff0c;「预测」存在挑战&#xff0c;但余震发生次数及强度的预测已取得重大进展。 2023 年 12 月 18 日 23 时 59 分&#xff0c;甘肃省临夏州积石山县发生 6.2 级地震&…

DQL-条件查询

1.语法 SELECT 字段列表 FROM 表名 WHERE 条件列表; 2.条件

RDD算子——Action 操作

reduce reduce 和 reduceByKey 有什么区别&#xff1a; reduce 是一个 Action 算子&#xff0c;reduceByKey 是一个转换算子 假设一个 RDD 里面有一万条数据&#xff0c;大部分 Key 是相同的&#xff0c;有十个不同的 Key。 rdd.reduceByKey 生成 10 条数据 而rdd.reduce 生成…

VScode/Xshell连接学校服务器

vscode连学校服务器 1.连接atrust VPN2.Xshell连接服务器2.1创建一个自己的用户 3.xftp传文件4.vscode连接服务器4.1下载remote-ssh4.2连接服务器4.3激活conda环境4.4运行代码 5. pytorch版本不兼容解决方案 1.连接atrust VPN 如果是使用的是校园网&#xff0c;可以不连接 2…

已删除数据恢复,4个简单有效方法分享!

“我前段时间不小心将电脑里重要的几个文件删除了&#xff0c;今天查找这些文件时才发现我的数据都没有了&#xff0c;这可怎么办呢&#xff1f;还有恢复的机会吗&#xff1f;” 很多用户在使用电脑时&#xff0c;会选择直接将重要的文件保存在电脑上&#xff0c;这就不可避免在…

Android 架构 - 模块化

参考文章 谷歌官方指南 一、概念 将大型、复杂问题拆解成一个个小的、简单问题&#xff0c;从而可以做到各个击破。模块化简单讲就是把多功能高耦合的代码逻辑拆散成多个功能单一职责明确的模块。模块指 Android 项目中的 module&#xff0c;通常会包含 Gradle 构建脚本、源代…

TS 36.213 V12.0.0-PDSCH相关过程(1)-收到PDSCH的UE过程

本文的内容主要涉及TS 36.213&#xff0c;版本是C00&#xff0c;也就是V12.0.0。

基础数据结构第九期 堆(数组+STL)

前言 堆是一种重要的数据结构&#xff0c;因此应该熟练掌握。 一、堆的基本概念 堆的基本&#xff1a; 堆的结构实际上是一棵完全二叉树&#xff0c;堆可以分为大根堆和小根堆 大根堆&#xff1a; 小根堆&#xff1a; 堆的储存&#xff1a; 若节点小标为i&#xff0c;则左子…

虚拟机VMware安装Linux

关于安装&#xff0c;安装版本是CentOS 7&#xff0c;选择最小安装即可 第一步&#xff1a;选择创建新的虚拟机 第二步&#xff1a;默认典型&#xff0c;点击下一步 第三步&#xff1a;选择稍后安装操作系统 第四步&#xff1a;选择Linux和版本 第五步&#xff1a;输入虚拟机名…

鸿蒙Ability开发-Stage模型下Ability的创建和使用

创建Ability和Page页面 创建两个Ability&#xff1a;EntryAbility&#xff0c;DetailsAbility&#xff0c;其中EntryAbility是由工程默认创建的&#xff0c;这里我们只讲如何创建DetailsAbility。 使用DevEco Studio&#xff0c;选中对应的模块&#xff0c;单击鼠标右键&…

蓝桥杯省赛无忧 竞赛常用库函数 课件7 二分查找

01 二分查找的前提 02 binary_search函数 #include<bits/stdc.h> using namespace std; int main(){vector<int> numbers{1,3,5,7,9};int target 5;//使用binary_search 查找目标元素bool found binary_search(numbers.begin(),numbers.end(),target);if(found){…

利用矩阵特征值解决微分方程【1】

目录 一. 特征值介绍 二. 单变量常微分方程 三. 利用矩阵解决微分方程问题 四. 小结 4.1 矩阵论 4.2 特征值与特征向量内涵 4.3 应用 一. 特征值介绍 线性代数有两大基础问题&#xff1a; 如果A为对角阵的话&#xff0c;那么问题就很好解决。需要注意的是&#xff0c;矩…

强直性脊柱炎=“不死的癌症”?这些常识你不可不知→

对强直性脊柱炎这个疾病&#xff0c;大家最常听说的是&#xff1a;强直性脊柱炎症状重、治疗难&#xff0c;会逐渐引发关节畸形、功能丧失&#xff0c;甚至残疾&#xff0c;被称为「不死的癌症」。 然而&#xff0c;近来越来越多患有强直性脊柱炎的明星活跃在荧幕上&#xff0c…

Azure AI 内容安全Content Safety Studio实战

Azure AI Content Safety 检测应用程序和服务中用户生成和 AI 生成的有害内容。 Azure AI 内容安全包括文本和图像 API&#xff0c;可用于检测有害材料。 交互式 Content Safety Studio&#xff0c;可用于查看、浏览和试用用于检测不同形式的有害内容的示例代码。 关注TechLead…

实践论原文与解读

文章目录 一、原文二、解读1&#xff1a;世界是怎样的&#xff1f;社会是怎样的&#xff1f;每一个单独的个体是怎样和这个世界广泛联系的&#xff1f;想要读懂实践论这是首先要解决的问题。2&#xff1a;认知在生命实践中起怎样的作用&#xff1f;命运是什么&#xff1f;人是否…

C#.Net学习笔记——设计模式六大原则

***************基础介绍*************** 1、单一职责原则 2、里氏替换原则 3、依赖倒置原则 4、接口隔离原则 5、迪米特法原则 6、开闭原则 一、单一职责原则 举例&#xff1a;类T负责两个不同的职责&#xff1a;职责P1&#xff0c;职责P2。当由于职责P1需求发生改变而需要修…