vxe自定义表头设置+前端本地数据存储

news2024/11/24 1:48:59

业务要求

  1. 支持拖动排序,按现有内容排序
  2. 支持显示/隐藏,默认全部显示
  3. 列表增加顶部格线,用户可以自己调整列宽
  4. 设置内容仅对该账号有效,前端存储

最终实现的效果

在这里插入图片描述
哪些改动

静态表格改动态表格 table > grid

vxe-grid 高级表格:一个包含表单、工具栏、基础表格、分页…等全功能的组件

拖拽用到了 draggable

上一个需求自定义拖拽表单也用到了 下次分享

当用户刷新以后,拖动的列的宽度跟自定义列的顺序 显示隐藏都还在,所有肯定是要存储一份数据,要么后端存数据库,要么前端存本地

本次实现方式是由前端存储

不过都差不多哈 定义好数据 以后传给后端也一样

需要自定义的表列信息

mixinGridOptions: {
  columns: [
    { type: 'seq', title: '序号' },
    { field: 'cnName', title: '中文名称', slots: { default: 'cnName' }},
    { field: 'enName', title: '英文名称', slots: { default: 'enName' }},
    { field: 'enShortName', title: '英文简称', slots: { default: 'enShortName' }},
    { field: 'positionLevelStr', title: '职位级别' },
    { field: 'tenantDepartmentName', title: '所在部门' },
    { slots: { default: 'operate', header: 'operate_header' }}
  ]
}

是所有列的数据 既用于渲染动态表格 也用来渲染操作栏

<vxe-grid v-bind="mixinGridOptions"></vxe-grid>

这些数据可以封装 其他表格也用的上

mixinGridOptions: {
  loading: false, // 是否带有边框
  stripe: true, // 是否带有斑马纹
  border: 'none', // 是否带有边框
  resizable: true, // 列是否允许拖动列宽调整大小
  showOverflow: true, // 设置所有内容过长时显示为省略号(如果是固定列建议设置该值,提升渲染速度)
  autoResize: true, // 自动监听父元素的变化去重新计算表格(对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到)
  syncResize: true, // 自动跟随某个属性的变化去重新计算表格,和手动调用 recalculate 方法是一样的效果(对于通过某个属性来控制显示/隐藏切换时可能会用到)
  align: 'center', // 所有的列对齐方式
  columns: [], // 列配置
  data: [], // 表格数据 正常表格数据 从后端获取
  resizableConfig: { // 列宽拖动配置项
    minWidth: 'auto' // 列宽拖动的最小宽度
  }
}

单列拖拽

<draggable
  :list="customTableList.columns"
  chosen-class="chosen"
  force-fallback="true"
  group="people"
  animation="500"
  @end="onEnd"
>
  <div v-for="item in customTableList.columns" :key="item.title" class="box-card">
    <div v-if="item.title">
      <p> <span class="vxe-icon-menu"></span> <span>{{ item.title }}</span> </p>
      <el-switch v-model="item.visible" @click.stop.native.prevent @change="val=>switchChange(val,item)"></el-switch>
    </div>
  </div>
</draggable>

互相拖拽跟单列拖拽的区别

group=“people”
| group | :group= “name”,相同的组之间可以相互拖拽

// 当列宽拖动发生变化时会触发该事件
mixin_resizableChange({ column, resizeWidth }) {
  const tableRefName = this.mixinGridOptions.tableRefName;
  const clientWidth = this.$refs[tableRefName].$el.offsetWidth;
  const resultWidth = parseInt((resizeWidth / clientWidth) * 100);
  this.mixin_saveTableData();
}
mixin_saveTableData() {
	// 表格的唯一标识
	const tableRefName = this.mixinGridOptions.tableRefName;
	const customTableData = JSON.parse(localStorage.getItem('customTableData')) || {};
	this.mixinGridOptions.columns[this.mixinGridOptions.columns.len
	this.$refs[tableRefName].refreshColumn();
	// userID 用户的唯一标识
	customTableData[`userId_${this.userId}`] = { [tableRefName]: this.mixinGridOptions.columns };
	localStorage.setItem('customTableData', JSON.stringify(customTableData));
	console.log('缓存数据更新');
}

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

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

相关文章

一文深度解读音视频行业技术发展历程

从1948年的香农定律&#xff0c;到音视频的今天。IMMENSE、36氪&#xff5c;作者 北京时间2月28日凌晨&#xff0c;FIFA年度颁奖典礼在巴黎举行。梅西荣膺年度最佳球员&#xff0c;斯卡洛尼当选年度最佳男足主帅&#xff0c;马丁内斯荣获年度最佳男足门将&#xff01;阿根廷因…

自动售卖机的类型和工作流程分析

线上经济的崛起提高了人们的生活品质&#xff0c;促进了我国市场经济的发展。随着互联网的快速发展&#xff0c;线上经济资源已经饱和&#xff0c;线上和线下资源整合已经成为市场经济发展的方向&#xff0c;而自动售卖机正是线上和线下经济发展的连接纽带。 自动售卖机作为无人…

3.查找算法:顺序查找和二分查找

查找查找&#xff0c;是指在一些数据元素中&#xff0c;通过一定的方法找出与给定关键字相同的数据元素的过程。列表查找&#xff08;线性表查找&#xff09;&#xff1a;从列表中查找指定元素输入&#xff1a;列表&#xff0c;待查找元素输出&#xff1a;元素下标&#xff08;…

多线程 随便起的

进程&#xff1a;进程可以看成程序执行的一个实例。进程是系统资源分配的独立实体&#xff0c;每个进程都拥有独立的地址空间。一个进程无法访问另一个进程的变量和数据结构如果想让-一个进程访问另一个进程的资源&#xff0c;需要使用进程间通信&#xff0c;比如管道&#xff…

LAMP项目部署实战1

一、说明&#xff1a; LAMP&#xff1a;Linux Apache MySQL PHP Apache&#xff1a; Apache是世界使用排名第一的Web服务器软件。主要用于接收用户的请求&#xff0c;处理业务逻辑&#xff0c;返回结果给客户端&#xff08;浏览器&#xff09;。 PHP&#xff1a;一种专门…

SQL 层功能改进 - lookupJoin 的优化

一、传统 join 算法lookupJoin 是 join 查询的一种&#xff0c;传统 join 算法为&#xff1a;1. 遍历 A 表&#xff0c;读取一条数据 r2. 遍历 B 表&#xff0c;对于每条数据&#xff0c;与 r 进行 join 操作3. 重复 1、2 操作&#xff0c;直到 A 表遍历完所有数据二、lookupJo…

在 WIndows 下安装 Apache Tinkerpop (Gremlin)

一、安装 JDK 首先安装 Java JDK&#xff0c;这个去官网下载即可&#xff0c;我下载安装的 JDK19&#xff08;jdk-19_windows-x64_bin.msi&#xff09;&#xff0c;细节不赘述。 二、去 Tinkerpop 网站下载 Gremlin 网址&#xff1a;https://tinkerpop.apache.org/ 点击下面…

用cpolar发布本地的论坛网站 1

网页论坛向来是个很神奇的地方&#xff0c;曾经的天涯论坛和各种BBS&#xff0c;大家聚在在一起讨论某个问题&#xff0c;也能通过论坛发布想法&#xff0c;各种思维碰撞在一起&#xff0c;发生很多有趣的故事&#xff0c;也产生了很多流传一时的流行语录。当然&#xff0c;如果…

推荐5款免费无广告的精品软件

检查一下你最近安装的软件&#xff0c;他们是不是都一样无法避免最终被你打入冷宫的命运&#xff1f;我们明明很懂“在精不在多”的道理&#xff0c;却依然让我们的电脑塞满了形形色色无用的软件。你需要知道的是&#xff0c;如何找到一款适合自己且真正实用的电脑软件。 1.多…

元宇宙营业厅,数字技术融合,赋能实体经济

在我国数字经济与虚拟服务市场规模扩大下&#xff0c;元宇宙营业厅强势来袭&#xff0c;从多场景、多内容&#xff0c;深耕高效协同的特色功能&#xff0c;基于多元化、灵活的交互体验&#xff0c;更大程度上解决线上业务办理抽象繁琐&#xff0c;线下业务办理的时空受限、业务…

4.Spring【Java面试第三季】

4.Spring【Java面试第三季】前言推荐4.Spring27_Aop的题目说明要求Spring的AOP顺序AOP常用注解面试题28_spring4下的aop测试案例业务类新建一个切面类MyAspect并为切面类新增两个注解&#xff1a;spring4springboot1.5.9pom测试类29_spring4下的aop测试结果aop正常顺序异常顺序…

求极限方法总结

1.利用四则运算法则求极限 2.利用两个重要极限求极限 //0除以0型 //1的无穷次方型 3.利用等价无穷小替换替换求极限 //在等价替换时注意和差项 4.利用洛必达法则求极限 5.利用夹逼准则求极限 6.利用单调有界数列极限准则求极限 7.利用无穷小的性质求极限 8.利用函数的连续性…

来面试阿里测开工程师,HR问我未来3-5年规划,我给HR画个大饼。

在面试的过程中是不是经常被面试官问未来几年的职业规划?你会答吗&#xff1f;是不是经常脑袋里一片空白&#xff0c;未来规划&#xff1f;我只是想赚更多的钱啊&#xff0c;哈哈哈&#xff0c;今天我来教大家&#xff0c;如何给面试官画一个大饼&#xff0c;让他吃的不亦乐乎…

MySQL高级第二讲

目录 二、MySQL高级02 2.1 触发器 2.1.1 触发器介绍 2.1.2 创建触发器 2.2 MySQL的体系结构 2.3 存储引擎 2.3.1 存储引擎概述 2.3.2 各种存储引擎特性 2.3.3 InnoDB 2.3.4 MyISAM 2.3.5 MEMORY 2.3.6 MERGE 2.3.7 存储引擎的选择 2.4 优化sql 2.4.1 查看sql执行…

二分查找重复情况 找最左边或最右边的位置下标

目录二分找最左边二分找最右边综合应用(剑指offer)二分找最左边 核心思想: 先mid (lr)/2每次向左取整; 然后命中target的时候&#xff0c;右边界逼近到mid; 因为每次mid向左取整&#xff0c;mid命中target时l代替mid位置&#xff0c;则循环迭代最后会卡出重复数字最左侧的位置…

糖化学试剂55520-67-7,5-vinyl-2-deoxyuridine,5-乙烯基-2-脱氧尿苷特点分析说明

5-vinyl-2-deoxyuridine(5-VdU)&#xff0c;5-vinyl-2-deoxyuridine&#xff0c;5-Vinyldeoxyuridine5-乙烯基-2-脱氧尿苷 | CAS&#xff1a;55520-67-7 | 纯度&#xff1a;95%试剂信息&#xff1a;CAS&#xff1a;55520-67-7所属类别&#xff1a;糖化学分子量&#xff1a;C11H…

信息系统基本知识(一)

1.1 信息系统与信息化 信息论已发展成为一个内涵非常丰富的学科&#xff0c;与控制论和系统论并称为现代科学的“三论” 1.1.1 信息的基本概念 香农指出&#xff1a;信息是能够用来消除不确定性的东西。信息量的单位&#xff1a;比特 信息的特征 客观性&#xff1a;信息是…

四信塔式起重机监控系统应用方案

方案背景 塔式起重机是当前工业建设进行起重运输作业的重要设备&#xff0c;其设备性能、参数、技术指标的可靠性都关系起重机设备的危险&#xff0c;塔式起重机安全事故关系国计民生、危害面广&#xff0c;给国家财产和生命安全带来严重损失。 目前众多塔式起重机司机虽然有上…

界面开发(1) --- PyQt5环境配置

PyQt5环境配置 第一步&#xff1a;首先安装社区版Pycharm 下载地址&#xff1a;https://www.jetbrains.com/pycharm/download/#sectionwindows 第二步&#xff1a;安装Anaconda3&#xff0c;配置虚拟环境 下载地址&#xff1a;https://www.anaconda.com/ 第三步&#xff1…

win10安装docker

1.win10安装docker&#xff0c;前提必须是要安装WSL2。 现在Docker Desktop默认使用WSL 2来运行&#xff0c;而不是以前的Hyper-V。 WSL2 全称是Windows Subsystem on Linux。意思是&#xff0c;在win10&#xff0c;可以直接启动一个Linux。因为docker依赖Linux内核。 可查看…