在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时,有这么一个需求:该级联选择框一共有三级结构分别为国家-省份-城市,国家和省份为必选项,城市为可选项。具体实现如下:el-cascader 设置最后一级可选可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的通过为第一级选项内容设置 disable
elementUI中的el-table勾选框设置默认勾选、禁用最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark=“1”,是勾选状态且该勾选框变为禁用状态;反之,如果remark !=“1”,则不是勾选状态且用户可以进行勾选 当用户手动进行勾选某行数据时,该操作将向后端发送请求,请求成功则该行数据所对应的的勾选框状
都知道Excel中的数据有一定的格式,格式不对,轻则不美观,重则出现各种错误。工作中,老板给我的Excel表格却常常是这样的:它有什么问题呢?好可怕,随便标记一下,就出来这么多问题。没法子,别人不按章程劳动,后果却是你要承担的。于是,你不得不操刀改造它。从第一张表格,到这一张表格,整个过程耗时4分钟。① 不知道隐藏了多少行。别人看表格时常常这边筛选一下,那边筛选一下,结果就不知道隐藏了多少行。解决
 公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,checkbox自己也可以写,但不想写,还是想用element-ui实现表格单选,于是就用了element-ui中的方法实现了,贴代码: methods: { select (s
问题情境昨天韩老师发的文章Excel | 如何实现有下拉菜单的跨表数据汇总并查询,里面有下拉菜单,有朋友问这个下拉菜单怎么做的。 其实,在韩老师很早的一篇文章Excel | 多级联动菜单,规范数据输入中,也讲到过这个问题,不过,这篇文章对一级菜单的做法讲的不甚详细,那今天就来总结一下下拉菜单的几种做法。方法实现 1、选项 不固定 的下拉菜单——Alt+↓这种情况下,可以按 Al
前言本篇文章记述了如何在Vue3+Element Plus 技术栈下 实现一个具有筛选、排序、分页功能的表格,并将其封装成一个组件的过程。1.完成基础表格我们先使用el-table绘制一个基础的表格:<template> <div class="cl-PaginationTable"> <el-table :data="tableData" height=
转载 2024-06-27 06:12:16
346阅读
  现实的场景中很经常遇到表格el-table数据过多,为了更好的用户体验,所以我们需要用到分页,一般分页可以视数据量的大小可分为前端控制和后端控制。  先看下效果(已做脱敏处理)图1 前端el-table分页效果这里就把ElementUi官方的例子进行修改来说明<template> <el-table :data="tableData.slice((cu
转载 2024-04-18 14:00:50
683阅读
目录前言一、实现动态树形菜单1. 配置相应路径2. 创建组件3. 配置组件与路由的关系index.js4. 编写动态树形菜单5. 页面效果演示二、实现数据表格绑定及分页功能1. 配置相应路径2.  编写数据表格显示及分页功能代码BookList.vue3. 演示效果总结前言        在上期的博客中我与各位老铁分享了有关首页
前端在开发PC 端项目时,现在用的比较多的就是Element UI,而在PC端管理系统中,Table 可以说是必不可少,刚开始使用对table没有做过多的处理,可是在需要做一些处理时,对其文档不熟悉使用不熟练总出现一些意想不到的问题。表头和内容错位:解决在全局中添加 样式可解决:.el-table th.gutter { display: table-cell !important; }自定义
转载 2024-04-01 06:40:07
1014阅读
在日常工作中我们经常会碰到一个表格数据汇总的问题,那就是将公司或部门数据按周、月等维度在表格中登记数据,为了表格的规范性,这里就涉及到多个工作表添加相同表头的问题。表格效果图演示: 如上图所示,我们需要在每个月分的工作表sheet页中添加相同的表头,有序号、日期、部门、姓名、工号、销售额、提成等字段。如果sheet页比较少的情况下,我们一页页的复制粘贴就可以了,但是当表格数量比较多的时
文章目录前言一、两者的区别二、组件库三、具体讲解总结 前言今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法,一般情况下vue2使用Element UI这个组件库,表格组件的插槽的话一般都是使用v-slot,而vue3使用Element Plus组件库,表格组件中插槽一般为#default,下面就来讲一下这两个。一、两者的区别Element Plus
转载 2024-02-27 15:39:04
214阅读
前端框架多,一种方式不足以满足开发需求,现提供两种框架的不同导出方式,依据步骤即可导出,亲测有效一、vue框架导出1、安装依赖npm install --save xlsx file-saver2、在文件内引入import FileSaver from "file-saver"; import XLSX from "xlsx";3、使用html部分 : <el-button @click
前言前段时间做移动端的项目,项目中需要一个固定表头和首列的表格,但由于是移动端的,组件库里没有类似的,于是,就去网上找看有没有类似的,结果越找越气,10个文章9个抄,抄也行,你倒是抄个能用的啊,一篇根本就不能用的文章,抄个什么劲?有意义??? 没办法,只有自己写一个了。效果图实现思路1、首先分为四部分,左上角固定不动的表头,表头部分,首列部分,表格主体部分 2、整个表格添加定位position:
三种实现方式1、表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]。页面结构代码:<el-table :data
转载 2024-03-25 07:17:11
243阅读
经典EL表达式和Jquery实现表格表单常用操作表格选中,下拉框动态选中等基本功能经常用到,但是一段时间不操作又忘了在此做个记录就当是老年人备忘录:EL表达式实现下拉框初始化选中使用loop属性在一个元素中遍历若干集合点击表格某一列中按钮获取该行所有列的值动态编辑表格内容一、 EL表达式实现下拉框初始化选中EL表达式支持三元运算符,基于三余运算符的写法实现下拉菜单初始化<c:forEach
转载 2024-03-27 10:52:38
79阅读
一、简单的表格拖拽1、sortablejs地址:https://www.itxst.com/sortablejs/neuinffi.html配置项: http://www.sortablejs.com/options.htmlSortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、Ang
<template> <div> <el-card style="margin:20px 0"> <CategorySelect :show="!isShwoTable" @getCategoryId="getCategoryId" /> </el-card> <el-card>
——WORD2016系列教程之“表格美化”Word是一款文档编辑工具,小伙伴们都早已熟悉了。对它的一些文字编辑功能也能较好的运用。谈到表格大家首先想到的是EXCEL,然而在Word制作文档时,也需要表格。现在处于毕业季,小伙伴们是不是需要准备一份求职简历呢?这时是不是就需要用表格,记录自己的履历呢?当然还有很多地方要用到Word的表格,今天,我们一起来看看,怎样用Word也能做出一张
问题引出作为新手小白,在做了几个项目之后发现写新增编辑时经常会有各种名单人员的设置,在此做下记录。通常我的流程是打开人员名单窗口,点击添加再进入到新的窗口选择成员,然后反馈到人员名单窗口,就会涉及到进入添加成员窗口时对已添加成员保留勾选状态。解决人员名单窗口已添加成员名单数据记为selectedData,新增人员窗口的表格数据记为tableData。新增人员窗口获取表格数据tableData时对数
最近我们公司的项目的在导出excel的时候偶尔出现内存溢出错误,经过测试发现当数据量大于5000条就出现这个问题(默认php.ini memory 是128M)Allowed memory size of 134217728 bytes exhausted (tried to allocate 43 bytes)解决内存溢出问题方法如下增加内存了,修改php.ini中memory_limit 或者
  • 1
  • 2
  • 3
  • 4
  • 5