草庐IT

el_upload

全部标签

【自定义列表头】vue el-table表格自定义列显示隐藏,多级表头自定义列显示隐藏,自由搭配版本和固定列版本【注释详细】

前言功能介绍最近遇到一个功能,需要的是把表格的列可以配置,用户可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些。于是我做了两个版本。第一个版本是自由搭配的。就是提前顶号所有的列,然后自己可以拖拽到想要位置顺序。也可以自己新增一个二级表头自定义一个名称把表头都拖进去组成多级表头表格。不过这种的毕竟复杂。第二个版本就简单一些了,是固定的列,比如十列写好了,然后用户只能在这十列里面选择显示或隐藏哪些。位置不能动,文字也不能动。就是单纯的显示隐藏列效果图外面的表格样子,点击右边的小齿轮开始设置打开后是这样的。左边可以勾选需要的列,会添加到右边。然后右边可以拖拽到想要的顺序。也可以添加一个蓝色表头自

elementui el-table表格实现翻页和搜索均保持勾选状态(后端分页)

需求:不管是页面切换还是通过搜索获取数据,都要保持已选中的行保持勾选状态,同时将选中行的内容以标签的形式显示出来,当点击关闭标签时可以对应取消选中状态,点击行中的任意位置也可以切换选中状态,单独勾选复选框一样可以达到要求。由于需求相对还是蛮复杂的,直接使用row-key和reserve-selection,难以实现。所以直接通过书写代码来控制表格的勾选状态。注意:我使用的是vue3+ts!!!!1.第一步:书写html代码给el-table添加对应勾选的监听事件,row-click用于监听鼠标选中某行时的勾选事件(不需要可去掉,我的需求是鼠标选中某行也要勾选);selection-change

[element-ui] el-table在flex布局中,高度不断增加的问题

el-table的父元素不能是flex:1的元素,需要在外面再加一层元素,并且父元素设置成absolute,祖父元素设置成relative即可。divclass="table-wrap">divclass="table-content">el-table:data="tableData">.../el-table>/div>/div>.table-wrap{flex:1;position:relative;/*解决表格高度不能适应flex,不断增加的问题*/.table-content{position:absolute;width:100%;height:100%;}}参考element-u

关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题

1.问题描述当使用在网页中加载本地图片时,会出现图片加载失败的问题,但使用标签可以正常显示。2.原因在element组件上使用相对路径时webpack不会对路径进行处理,导致请求了一个无效的路径。3.解决将改为(注意给src属性加:)【附】::src属性后面的字符串会被当做变量解析使用,而src属性后面的只会被当字符串使用

全面了解文件上传漏洞, 通关upload-labs靶场

靶场简介upload-labs是一个专门用于学习文件上传漏洞攻击和防御的靶场。它提供了一系列模拟文件上传漏洞的实验环境,用于帮助用户了解文件上传漏洞的原理和防御技术。这个靶场包括了常见的文件上传漏洞类型,如文件名欺骗、文件类型欺骗、文件上传功能绕过等。通过练习不同的攻击方式,用户可以加深对文件上传漏洞的理解和提高对这类漏洞的攻击和防御技能靶场搭建upload-labs靶场下载地址:https://github.com/c0ny1/upload-labs将下载好的upload-labs解压至phpstudy的WWW目录,随后开启phpstudy靶场通关pass-1(JS代码绕过)源码审计查看网页

将较大的数组赋值<el-table></el-table>时,会导致页面卡顿,甚至崩溃

遇到的问题:将长度为40的数组数据赋值,我发现loading没有效果,后面发现是页面卡住了,loading直接没有出现。经过查询资料,发现会有卡顿的问题,看到有的博主推荐使用一款叫umy-ui的插件,我就试了试,发现卡顿的问题解决了。官网:http://www.umyui.com/umycomponent/installation安装:npmiumy-ui全局注册:importUmyUifrom'umy-ui'import'umy-ui/lib/theme-chalk/index.css';//引入样式importAppfrom'./App.vue';Vue.use(UmyUi);将el-ta

使用docker进行upload-labs靶场的安装搭建

由于我是在kali上搭建,默认没有docker服务,这里就从按照docker开始讲解一、docker按装1、Linux内核版本查看#如果你是kali可直接从第四步开始#安装docker要求内核版本kerner>=3.10#为此,先检查当前Linux系统的内核版本uname-a2、更新apt源满足下载要求#新重写sources.list中内容,一个个字母删除太久了cho>/etc/apt/sources.list#进入sources.lis重新编辑apt源vim/etc/apt/sources.list#直接CV大法写入下面的apt源#阿里云debhttp://mirrors.aliyun.co

layui框架实战案例(21):layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)

上传的哪些事一、核心方法与基础参数选项二、使用upload组件1.调用layui.upload2.文件上传进度条3.弹出进度条4.完整核心代码5.效果预览6.后台上传代码7.附带参数data一、核心方法与基础参数选项upload.render({elem:'#uploadlicense'//指向容器选择器,url:'?m=Index&a=indexDeal&act=upImg&fromType=license'/服务端上传接口,data:{user_id:user_id}//请求上传接口的额外参数。如:data:{id:'xxx'}从layui2.2.6开始,支持动态值,multiple:fa

element ui - el-table 表头筛选

elementui-el-table表头筛选前言情况一:表格没有分页方法代码前言场景:根据表头筛选出表格中符合条件的数据;效果:筛选结果:情况一:表格没有分页方法在列中设置filters和filter-method属性即可开启该列的筛选。filters:筛选的下拉列表,是一个json数组,里面的json对象是{text:‘’,value:‘’}的格式,text是下拉选项的显示内容,value则为选择的值;filter-method:筛选时触发的方法,是一个函数,会传入三个参数:value,row和column,它的作用是决定某些数据是否显示。代码html部分:el-table-column p