vxe-table——实现table 动态显示 +冻结列等功能——技能提升

之前我也有写过类似的功能,就是可以自定义勾选需要展示的列。

不过之前是我自己写的弹窗处理的,有现成的插件vex-table插件可以使用。
vxe-table官网:https://vxetable.cn/v3/#/table/api
在这里插入图片描述

解决步骤1:安装vxe-table——npm install vxe-table@3.8.15

解决步骤2:挂载到main.js中——全局注册

import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

解决步骤3:页面使用

<vxe-table size="small" border resizable ref="xTable1" id="toolbar_demo5" :custom-config="customConfig"show-overflow="tooltip" :sort-config="sortConfig" :row-config="rowConfig" :checkbox-config="checkboxConfig":data="dataSource" :loading="loading" @checkbox-change="wipCheckboxChange" @checkbox-all="wipCheckboxAll"@sort-change="wipSortChange"><vxe-column type="checkbox" width="50"></vxe-column><vxe-column sortable field="cardNo" title="管制卡编号" width="160"><template #default="{ row }"><a href="javascript:;" @click="printGzk(row)"style="text-decoration: underline;cursor: pointer;color: #333;">{{ row.cardNo }}</a><a-icon style="margin-left: 5px; color: #333; cursor: pointer" type="copy" @click="copyClick(row)" /><span style="margin-left: 5px" v-if="row.isJiaJi"><a-tag color="red"></a-tag></span></template></vxe-column><vxe-column sortable field="thirdOrderNo" title="生产编号" width="130"></vxe-column>
</vxe-table>

注意上面的代码:

1.sortable 【表示该列需要排序】
2.resizable 【表格是否自适应】
3.ref 【用来获取表格的,比如清空选中:】
this. r e f s . x T a b l e 1. c l e a r C h e c k b o x R o w ( ) 【手动清空用户的选择,仅针对一行】 t h i s . refs.xTable1.clearCheckboxRow() 【手动清空用户的选择,仅针对一行】 this. refs.xTable1.clearCheckboxRow()【手动清空用户的选择,仅针对一行】this.refs.xTable1.clearAll() 【手动清空所有选择,针对多行】
4.id 【这个应该i是为了下面的custom-config中的本地存储来使用的】

在这里插入图片描述

5.custom-config 【个性化信息配置】
比如:需要将当前排序+显示/隐藏列缓存到本地,则需要下面的配置
在这里插入图片描述

在这里插入图片描述

6.show-overflow:所有内容过长时显示为省略号

在这里插入图片描述

7.sort-config:

defualtSort是个对象数组,对象参数为field+order
defaultSort——是个对象数组,每一项是field+order
multiple——设置为true,则表示支持多列排序
remote——是否支持服务端排序,就是如果排序仅当前页,则remote可以设置为false,如果是多页的排序,只能后端处理的,则需要设置为true
trigger——触发方式:ceil点击表头触发排序

在这里插入图片描述

8.row-config 【只有也给keyField是必要的,也就是指向id作为唯一值】

在这里插入图片描述

9.checkbox-config:
checkAll——是否默认勾选所有,可以设置为false,默认不勾选
checkRowKeys——选中的keys的集合,也就是id的集合

在这里插入图片描述

10.checkbox-change
11.checkbox-all

在这里插入图片描述

12.type=“checkbox” 【表示该列可以是复选框的样式】
13.field=“cardNo” 【指定每一列对应的参数名】
14.#default=“{ row }” 【自定义每一列内容时,用到的参数来源,row就相当于antd中的record,当前行的所有内容】
15.sort-change 【由于是服务的排序,则需要监听排序动作,并请求接口】

在这里插入图片描述

wipSortChange({ column, field, order, sortBy, sortList }) {console.log(column, field, order, sortBy, sortList)if (sortList.length != 0) {let arr = sortList.map((v) => {return v.field + ' ' + v.order})localStorage.setItem('sort_arr', JSON.stringify(arr))}let sort = localStorage.getItem('sort_arr')if (sort != undefined) {this.queryFrom.OrderBy = JSON.parse(sort).toString()}this.card_list_api()//调用接口},

上面有一部分操作:是将排序的字段+排列顺序存储到本地,虽然custom-config中有一个是否启用localStorage本地保存,这个本地保存到排序是下面弹窗中的内容而非每一列的排序内容。

在这里插入图片描述

openCustom:@click=“$refs.xTable1.openCustom()” 简简单单的一句话,就可以实现动态列+是否固定列等操作。

在这里插入图片描述
在这里插入图片描述

还可以设置【左固定】还是【右固定】等操作。
在这里插入图片描述
实现的效果:
1.mode:可以是上面的弹窗,也可以是下面的弹窗等,一共三种模式
2.弹窗可以最大化+最小化
3.拖动第二列的小图标可以实现上下排序
4.可以自定义每一列的宽度
5.可以冻结指定列,最多4列

在这里插入图片描述

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

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

相关文章

HTTP状态码介绍,带你了解请求响应全过程

1xx状态码&#xff1a;&#x1f449;表示信息响应&#xff0c;客户端请求已被接收&#xff0c;继续处理。 100 - Continue&#xff1a;客户端应继续其请求。&#x1f914; 101 -Switching Protocols&#xff1a;服务器已经理解并接受了客户端的请求&#xff0c;将切换协议。 10…

【自用14】C++俄罗斯方块-思路复盘

1.编写主函数 int main(void){welcome();//欢迎函数system("pause");//窗口停留colsegraph();//关闭图画return 0;//返回值 }其中包含有最开始的欢迎&#xff0c;以及基础的窗口停留、图画关闭和返回值语句 2.编写欢迎函数 需求&#xff1a; 欢迎函数中需要包含的…

Java如何读取resources目录下的文件路径(九种代码示例教程)

本文摘要&#xff1a;Java如何读取resources目录下的文件路径 &#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。公粽号&#xff1a;洲与AI。 &#x1f91…

教育行业解决方案:智能PPT在教育行业的创新应用

在信息化时代&#xff0c;教育行业面临着巨大的变革。随着人工智能技术的不断发展&#xff0c;传统教学方式正在被重新定义。彩漩科技作为 AI 技术的先行者&#xff0c;推出了歌者 PPT &彩漩 PPT&#xff0c;为教师、学生和家长提供了一种全新的教育体验&#xff0c;实现了…

Quartz.Net_持久化

简述 通常而言&#xff0c;Quartz.Net的数据默认是存储在运存中的&#xff0c;换言之&#xff1a;断电即失。所以在默认情况下&#xff0c;当系统重启后&#xff0c;原先的所有任务、触发器、调度器都会失效 为避免上述情况的发生&#xff0c;可以对Quartz.Net进行持久化设置…

第二十一届华为杯数学建模经验分享之资料分享篇

今天给大家分享一些数学建模的资料&#xff0c;通过这些资料的学习相信你们一定在比赛中获得好的成绩。今天分享的资料包括美赛和国赛的优秀论文集、研赛的优秀论文集、推荐数学建模的相关书籍、智能算法的学习PPT、python机器学习的书籍和数学建模经验分享与总结&#xff0c;其…

[Hive]五、Hive 源码编译

G:\Bigdata\2.hive\大数据技术之Hive源码编译 Hadoop3.3.1 Hive3.1.3 Spark3.3.1 Hive on spark / spark on hive 均验证通过。 第1章 部署Hadoop和Hive 1.1 版本测试 Hadoop3.3.6 和Hive3.1.3 运行hive客户端时报错: java.lang.NoSuchMethodError:com.google.common.ba…

蓝桥杯:整数删除

// 蓝桥杯整数删除.cpp : Defines the entry point for the console application. //#include "stdafx.h" #include<stdio.h> #define MAX 100 void findmin(int a[],int n,int& pos) {int mina[0];pos0;//pos0我开始忘了&#xff0c;特别注意边界for(int …

怎么才能快速提升网站在谷歌的收录?

​想让你的网站在谷歌快速收录&#xff0c;其实正常的方法都需要时间&#xff0c;无论是定期更新&#xff0c;提交网站地图&#xff0c;搞外链建设啥的&#xff0c;这些方法虽然有效&#xff0c;但见效慢。而且谷歌爬虫不会一下子抓取你所有页面&#xff0c;需要时间。如果真想…

停车找位难怎么办?捷顺智慧车位引导系统方案,让找车停车变得简单快捷!

随着城市化的快速发展&#xff0c;城市交通压力日益增大&#xff0c;尤其是在商业区、办公区和居民区&#xff0c;停车位的供需矛盾愈发突出。在这种背景下&#xff0c;车位引导系统&#xff08;PGS&#xff09;的重要性日益凸显。它不仅能够提高停车效率&#xff0c;减少车辆在…

用了这个编程助手,“数学建模”真的太简单了~

目录 一、ChatGPT在数学建模中的价值1、学习和指导2、模型评估和改进3、算法设计和优化4、解释和文档生成 二、作为编程手如何正确使用ChatGPT1、阅读代码及优化代码2、执行脚本3、生成单测 三、编程手备战建模大赛的一些建议1、明确&#xff1a;如何去问一个问题2、程序设计能…

[译] APT分析报告:12.APT29利用spy软件供应商创建的IOS、Chrome漏洞

这是作者新开的一个专栏&#xff0c;主要翻译国外知名安全厂商的技术报告和安全技术&#xff0c;了解它们的前沿技术&#xff0c;学习它们威胁溯源和恶意代码分析的方法&#xff0c;希望对您有所帮助。当然&#xff0c;由于作者英语有限&#xff0c;会借助LLM进行校验和润色&am…

STM32F100xx 系统架构

STM32F100xx 系统架构 参考手册下载关键词: STM32F100xx advanced Arm-based 32-bit MCUs - Reference manual 总结 注意: 这个架构是High-density value line devices的图。 ICode bus 把M3内核指令总线连接到闪存指令接口。Bus matrix 由4主4从构成。 总线矩阵管理内核系…

进程

进程 进程进程的含义PCB块内存空间进程分类&#xff1a;进程的作用进程的状态进程已经准备好执行&#xff0c;所有的资源都已分配&#xff0c;只等待CPU时间进程的调度 进程相关命6.查询进程相关命令1.ps aux2.top3.kill和killall发送一个信号 函数1.fork();2.getpid3.getppid示…

Web 应用开源项目大全结合巴比达内网穿透

巴比达内网穿透配置 一、引言 无论是家庭用户还是企业用户&#xff0c;内网穿透技术的需求日益增长。巴比达&#xff08;BabiDa&#xff09;内网穿透工具以其简单易用的特性&#xff0c;成为了许多用户的首选。本文将详细介绍巴比达内网穿透的配置方法&#xff0c;帮助您轻松实…

人工智能在行动:利用人工智能扩展您的显示和视频工作

在过去的18个月里&#xff0c;我们见证了一场由生成式AI带动的变革性革命。我们看到消费者对生成式AI工具的使用从最初的好奇&#xff0c;逐渐发展到掌握知识并付诸行动。2024年标志着 AI实际应用 的一年&#xff0c;这一年里&#xff0c;每个人都开始利用这些技术来变得更加敏…

rancher upgrade 【rancher 升级】

文章目录 1. 背景2. 下载3. 安装4. 检查5. 测试5.1 创建项目5.2 创建应用5.3 删除集群5.4 注册集群 1. 背景 rancher v2.8.2 升级 v2.9.1 2. 下载 下载charts helm repo add rancher-latest https://releases.rancher.com/server-charts/latest helm repo update helm fetc…

Qt 应用程序主界面

主要窗口类的概述 这些类提供了典型现代主应用程序窗口所需的一切&#xff0c;如主窗口本身、菜单和工具栏、状态栏等。 QAction 可以插入小部件的抽象用户界面操作 QActionGroup 将动作组合在一起 QDockWidget 小部件&#xff0c;可以停靠在QMainWindow中&#xff0c;也可以作…

5、Django Admin后台移除“删除所选”操作

默认情况下&#xff0c;Django Admin后台的listview模型列表页&#xff0c;会有一个Delete Selected删除所选操作。假设你需要再从Hero管理模型中移除该删除操作。 ModelAdmin.get_actions方法可以返回所有的操作方法。通过覆盖此方法&#xff0c;移除其中delete_selected方法…

毒猫粮危机!安全主食罐怎么选?健康猫罐头推荐

央视315晚会揭露了“毒猫粮”事件&#xff0c;让众多爱猫人士心惊胆战。河北邢台南和区&#xff0c;这个被誉为“中国宠物食品之都”的地方&#xff0c;年产量惊人的130万吨宠物食品背后&#xff0c;竟隐藏着用劣质原料冒充高端食材的丑闻。低价粉料取代了昂贵鲜肉&#xff0c;…