Element UI
此专栏分享使用Element UI框架遇到的问题
阿wei程序媛
励志成为前端大佬
展开
-
element ui Checkbox 多选框组件 lable不支持Object类型的值的问题
浅浅记录一下,遇到这个问题的心理路程吧,首先我遇到的问题是多选框的值回显不打对勾,(例如:你新增的时候多选,然后点击编辑的时候选过的值没有被勾选,其实是被勾选上了,但是没有显示对勾,因为我点击已经选择过值就会取消勾选,说明这个值其实是回显了,但是不显示对勾),然后我就去查element ui,发现他的多选框的label只支持string / number / boolean,不支持object的形式,但是我的业务场景需要label的类型为object,于是尝试了各种方法之后,找到了一个最为合适的解决方案。原创 2023-12-28 15:17:25 · 1102 阅读 · 0 评论 -
基于element ui封装table组件
以上就是基于element ui封装table组件。1.封装表格代码如下。原创 2023-12-28 12:05:00 · 1614 阅读 · 0 评论 -
el-popover 的content内容换行
这样写content里面的内容直接不显示了,懵圈。,如果有知道的友友们,请指教。el-popover里面的content参数也可以通过slot传入DOM。需求:把el-popover的content内容进行换行。于是我看网上很多都是这样传入的。原创 2023-07-27 11:34:52 · 2144 阅读 · 4 评论 -
el-table编辑表格单元格
注:oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0) 校验小数点后面限制两位,我的应用场景里面有这个需求,所以这句可加可不加。1.在el-table标签注册 @cell-click="editName" :key="randomKey"最近写了一个需求,点击单元格可以进行编辑,编辑完成之后,点击保存,将编辑之后的数据传给后端。以上就能实现编辑表格的功能,如果有什么疑问或者错误,欢迎询问和指正。原创 2023-05-23 15:10:16 · 2168 阅读 · 3 评论 -
element ui 树状表格选择父节点子节点全选,子节点不全选父节点半选
以上就可以实现树状表格选择父节点子节点全选,子节点不全选父节点半选,但是对于handleSelectionChange,里面处理数据还是很懵的,虽然解决了,但是感觉不是最优的方法,如果有好的解决方法,可以分享下,欢迎分享和指正。这个里面还是比较混乱的,打印出来三次,这个我是可以理解的,因为勾选了三个,但是打印的这个顺序,我不太懂,由于有个勾选之后,操作批量下载和批量取消,不勾选的时候,是禁止点击批量下载和批量取消的。于是我就对上面的代码进行了改进。原创 2023-05-19 17:53:16 · 8681 阅读 · 16 评论 -
element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验
注: _self.form对象为上述第一种方法中的form对象。2.使用钩子函数,在创建页面时,重置对应属性的值。1.页面初始化时,设置当前属性初始值为空数组。原创 2023-04-11 13:41:51 · 1210 阅读 · 0 评论 -
Element UI el-select选择器根据后台返回的值动态展示内容
需求:一个选择器的下拉框里面的内容是后台返回的数据,对于这样的情况我们怎么处理呢?原创 2022-10-26 10:48:12 · 1905 阅读 · 0 评论 -
Vue ElementUI表格内实现图片点击放大效果的方式
方法一:使用el-popover弹出框trigger属性用于设置何时触发Popover(弹出框)属性值有:hover、click、focus 和 manual效果图: 方法二:使用v-viewer插件1.安装依赖,在项目文件里进行安装安装命令:npm install v-viewer --save安装依赖界面: 或者效果图:方法三:使用vue-directive-image-previewer组件1.安装依赖,在项目文件里进行安装安装命令:npm install vue-directive原创 2022-06-16 19:06:24 · 7523 阅读 · 5 评论 -
Element UI中表格中的Switch 开关如何使用及调接口
Element UI中表格中的Switch 开关如何使用及调接口原创 2022-06-15 11:54:59 · 2428 阅读 · 1 评论 -
vue表格(el-table)实现序号(1,2,3,4,5......)
vue表格(el-table)实现序号(1,2,3,4,5......)原创 2022-06-08 16:42:32 · 4591 阅读 · 1 评论 -
Element UI input输入框实现模糊查询
Element UI的input输入框进行搜索的时候(根据输入内容提供对应的输入建议)有个坑,它只能用第一个字进行搜索,不能够实现模糊匹配,下面的方法就是填这个坑。原来搜“奖”,后台给返回数据,但是不会出现下拉框。例如: 只要搜“抽”才出现下拉框 解决后实现效果: 代码如下: 重点:如果使用Element UI里面的......原创 2022-06-30 19:25:07 · 8166 阅读 · 0 评论 -
Element UI el-input校验,只能输入大于0的正整数、数字、小数点后两位
在el-input写入oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"在el-input写入oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"4.只能输入数字并且最多取到小数点后两位数字(2和3的合并)1.只能输入大于0的正整数。原创 2022-06-22 14:59:37 · 12538 阅读 · 6 评论 -
Element UI 去除日期时间选择器里的此刻按钮
去除Element UI 日期时间选择器里的此刻按钮原创 2022-06-13 17:29:10 · 6522 阅读 · 8 评论 -
Element UI表格的多选框CheckBox 是否可以勾选
项目需要使element ui表格的CheckBox 部分可勾选,部分不可勾选。多选框代码重点::selectable='checkboxT' 满足条件的不可以勾选,不满足的可以原创 2022-06-22 16:20:09 · 769 阅读 · 0 评论 -
vue element 日期范围选择器限制只能选今天之前的时间,只能选今天之后的时间,只能选取今天往后三天内,只能选取选中时间的一个月内的时间,只能选择除今天及今天之前的、周六日、美国节假日之外的时间
限制只能选今天之前的时间,只能选今天之后的时间,只能选取今天往后三天内,只能选取选中时间的一个月内的时间,只能选择除今天及今天之前的、周六日、美国节假日之外的时间,只能选当前时间之前的前三天以及之后的时间。4.只能选取选中时间的一个月内的时间(eg:如果我初始时间选中是2023.4.14,那么我的终止时间只能在2023.3.14和2023.5.15区间里面选中)以上几种情况是我在实际项目中遇到的然后总结出来的,如有不准确、更好的解决方法或者其他情况的时间限制可以在评论区讨论,共同进步。原创 2022-05-23 15:36:05 · 13514 阅读 · 4 评论 -
element ui 时间日期选择器控制从00:00:00-23:59:59
<div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-t..原创 2022-05-25 15:26:32 · 3105 阅读 · 1 评论 -
vue element ui里的日期时间选择器 中国标准时间转化为年月日时分秒
重点:value-format="yyyy-MM-dd HH:mm:ss",写上这句代码就不用处理年月日时分秒了,返回的就是我们需要的格式。element ui上的日期时间选择器里面的时间为中国标准时间,选择时间,打印出来为下图。补充——————————————————————————————————element ui上面有个属性format显示输入框里面的格式。但一般后台需要的是年月日时分秒,需要我们进行处理。原创 2022-05-25 16:08:06 · 13494 阅读 · 8 评论 -
vue elementui表格获取某行数据(slot-scope和selection-change方法使用)
2.但如果要实现的功能是在表头上了,例如图里的批量审核,那要怎么获取当前前勾选的这一行的数据呢?1.当写后台管理页面时,使用element ui里的table表格时,表格中有操作按钮,获取当前行的数据时,我们可以使用 slot-scope="scope"来获取。注意:this.multipleSelection.length 为选择了多少项。拿当前选中的行的数据,进行传值,实现批量审核功能。打印可得当前行数据,你就可以处理这些数据了。打印可得当前行数据,你就可以处理这些数据了。原创 2022-06-09 13:59:47 · 20375 阅读 · 2 评论 -
Element UI 里的el-table表格排序
后台管理有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可,但是如果存在分页的情况,就只能排序展示页的内容,无法所有数据排序,这时候我们就要使用后端排序了。一、给el-table设置事件@sort-change="changeTableSort"可以根据打印出来的值,和后端让我们传给他的参数,进行处理,就能实现排序功能。二、给需要排序的表格设置属性sortable="custom"三、声明changeTableSort()...原创 2022-07-19 10:15:06 · 10406 阅读 · 9 评论 -
el-table实现双击单元格完成复制的功能
2)cloumn可以看到被操作单元格的property,根据property可以再row中得到该单元格的值;setData()clipboardData对象赋予指定格式的数据(两个参数数据类型,要赋予的值)getData()clipboardData对象从剪切板获取指定格式的数据(一个参数数据类型)注cell-dblclick函数有四个参数,分别是row,column,cell,event;(1)row就是被操作单元格所在行的所有的数据。数据类型一般为““text/plain”...原创 2022-07-26 18:36:48 · 1893 阅读 · 0 评论 -
Vue Element UI 实现点击表格中某一个单元格进行复制其内容
console.log(row)打印出来的数据,是当前行的所有返回数据。4.在methods中定义方法handleCopyLink即可。利用此方法,就可以实现点击表格中某一个单元格进行复制其内容。需求实现点击表格中的某一个单元格能够进行复制其内容。1.安装插件vue-clipboard2。2.在main.js中引入。...原创 2022-07-22 14:05:14 · 3188 阅读 · 0 评论 -
Element UI el-select的下拉框实现分页加载,下拉加载更多
以上代码就可以实现此功能,可以根据自己的需求和接口进行修改。原创 2022-07-28 10:01:04 · 5932 阅读 · 4 评论 -
解决elementui消息提示this.$message换行问题
在element ui 的message消息提示的组件里面有个属性dangerouslyUseHTMLString(将。今天遇到一个问题,就是我的消息提示太长了,想要实现换行。就两步就能实现this.$message换行问题。就会被当作 HTML 片段处理。经过研究实现的效果为。属性设置为 true,原创 2022-08-24 14:35:39 · 6559 阅读 · 1 评论 -
Vue+Element Ui Table取消勾选的问题
今天遇到个bug,就是当我对表格里面的数据进行勾选之后,然后再进行一些操作(比如:筛选、查询等)以前勾选的数据还是在勾选状态,如果不注意,再去勾选一些数据,然后操作一些其他的操作(比如删除、上下架等)就会多传给后端数据,经过测试,发现会带入以前勾选的数据,造成的原因就是,没有将以前勾选的数据,经过一系列的操作之后清空。这个时候,当你勾选了一些数据之后,然后又去筛选其他的数据时,以前勾选的数据就会清空。2.当你操作某个操作时(比如:筛选、查询)1、在表格上操作dom元素 设置ref属性。原创 2022-09-02 15:11:55 · 6232 阅读 · 0 评论 -
vue element ui el-table单元格里面显示多张图片点击并放大
2.单元格里能够展示多张图片,需要在请求的接口里面做处理。一个单元格里面显示三张图片,并且点击图片可以放大。1.将图片v-for渲染出来,具体上代码。注:el-popover的属性。以上两步,就可以实现上面的功能。原创 2022-10-13 14:10:56 · 4384 阅读 · 2 评论 -
vue element ui Select 选择器设置默认状态
将系列状态默认为上架状态。以上代码就可以实现其功能。原创 2022-10-14 10:50:05 · 2797 阅读 · 0 评论 -
Element ui table表格内容超出隐藏显示省略号
tips的class名为.el-tooltip__popper,我们可以写css样式,但需要注意的是,在样式里面写scoped,.el-tooltip__popper样式无效,但是去掉scoped又有可能影响到其他页面的样式,解决办法就是,再写一个样式。给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容被隐藏显示为...当鼠标移入时单元格的上方会弹出一个tooltip来显示单元格的所有内容。原创 2022-09-20 11:07:36 · 12404 阅读 · 5 评论 -
Vue Element Ui中el-radio设置默认值
在写项目的时候,尤其是后台管理系统的修改操作,你需要掉后台接口(详情接口)先拿取后台传给你的数据,但是如果单选框的lable不处理,就会看不到单选框选择的是哪一个状态,(其实已经默认选择第一个了,第一个选择框点击不了)如图。有时候后台返回的单选框是number类型的,单选框的lable需要设置成 :lable='0',例如。element ui里面的label类型可以是string、number、boolean,如图。如果后台返回的是string,则正常写,例如。也可以实现上图效果。原创 2022-09-21 11:48:18 · 9300 阅读 · 0 评论