element
左手牵♪♡右手
这个作者很懒,什么都没留下…
展开
-
el-date-picker 时间控件 重新选择时间没有更新值
最近项目中遇到选择时间控件不能重新赋值得问题,最后解决办法就是加上一个时间清空。这样子就解决了重新选择没有更新值问题。原创 2022-10-11 14:07:20 · 1196 阅读 · 2 评论 -
img加载图片失败展示占位图的onerror事件
项目开发经常会遇到图片加载失败,要求在图片加载失败时,显示默认占位图片,经常是图片字段为空或null显示占位图,第一次遇到这样的。这样就解决了一部分加载不出来的图片。目前是可以满足两个标签。......原创 2022-07-19 14:56:46 · 2713 阅读 · 0 评论 -
element-- el-tree 组件封装使用( 新增、编辑、删除节点)
项目中会遇到需要树来展示数据的,要求每个节点需要增删改的,具体需要的根据自己实际项目需求可进行代码修改如图:el-tree组件封装:<template> <div class="white-body-view"> <el-tree id="my-tree" ref="tree" class="tree-view structure-tree scroll-bar" :data="原创 2022-05-11 15:20:07 · 8313 阅读 · 9 评论 -
el-date-picker--默认显示时间
<el-form-item label="开始时间" required> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="queryParmas.startTime" ...原创 2022-05-06 11:50:54 · 2336 阅读 · 0 评论 -
el-dialog-----弹出层拖拽、双击全屏
弹出框要求添加拖拽和双击头部全屏1、创建jsimport Vue from 'vue'// v-dialogDrag: 弹窗拖拽属性 (重点!!! 给模态框添加这个属性模态框就能拖拽了)Vue.directive('dialogDrag', { //属性名称dialogDrag,前面加v- 使用 bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400 let minHeight = 3原创 2022-04-26 10:27:51 · 675 阅读 · 0 评论 -
element-----el-calendar 使用自定义内容标记
项目中需求是展示讲师课程时间:代码部分:根据后台返回去对比判断:当status=1.就是有课,2是就是没课程<template> <el-calendar id="calendar" v-model="value"> <template slot="dateCell" slot-scope="{ date, data }"> <!-- 获取日历日期全展示年月日 data.day.split("-") .slice(1).join("-"原创 2022-03-24 11:52:48 · 1133 阅读 · 0 评论 -
el-menu--多级菜单封装使用
代码只做简单记录,细节需要去调试1、组件:menuItem.vue<template> <div> <template v-for="(item, index) in data"> <!-- 因为有子集和无子集渲染html标签不一样,所以要分为两种情况 情况一:有子集的情况: --> <el-submenu :key="index" :index原创 2022-03-16 11:15:08 · 2781 阅读 · 0 评论 -
element---在el-table中el-switch用法
项目中操作此数据:<el-table-column prop="custom" label="是否展示" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.custom" active-value="1" inactive-value=原创 2022-02-15 16:08:17 · 5741 阅读 · 3 评论 -
element---el-input只能输入正整数,不带其他特殊标点或符号
项目中经常会遇到输入框输入数字的情况,输入正整数不特殊符号的: <el-input v-model.trim="form.code" style="width:60%" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请填写短信验证码"></el-input>通过正则来限制输入只能是数字,一些特殊符号不能输入,例如:.*value.replace后面的可以去替换正则原创 2022-02-15 13:45:19 · 3334 阅读 · 1 评论 -
vue 关闭弹框重新打开时element输入框验证规则还在提示
1、表单中输入经常使用验证,但是每次提交后关闭弹框。再打开弹框验证还在作用,这个时候我们可以这样处理:2、我们可以使用这2种方法处理:①:在关闭弹框的地方: this.$refs.form.clearValidate();this.$refs.form这个form必须是和图片上的名称一致;这种方法适合全部②:如果是单个的可以使用:this.$refs.form.validateField('unitName')如果这样报错的话,可以试一试这样写,不会报错:this.KaTeX p原创 2022-01-21 16:49:12 · 3405 阅读 · 1 评论 -
el-popover 切换不同的图片和内容
<template> <div class="weTel"> <div class="cents"> <div @mouseenter="getTelop('top1')" :class="top_type===0?'top hand isp': 'topAvtive isp hand'"> <img v-if="top_type" :src="require('@/assets/images/lian1.png')原创 2021-12-16 10:11:27 · 949 阅读 · 0 评论 -
element----el-upload附件上传与附件回显
开发中经常也会遇到附件的上传和回显,最方便的就是我们封装一个公共组件在页面中引用1、上传在src里面新建一个文件夹<template> <el-upload class="upload-demo" multiple :limit="limit" :accept="accept" :headers="headers" :file-list="fileL原创 2021-11-18 10:24:08 · 6263 阅读 · 2 评论 -
element-----el-calendar 日历使用事件处理
如果使用官网日历el-calendar,要使用右上角自带的切换事件,我们可以需要他别处理:在create里面处理逻辑就可以了: created: function() { this.$nextTick(() => { // 点击前一个月显示前一个月考勤打卡展示 const prevBtn = document.querySelector( '.el-calendar__button-group .el-button-group>butt原创 2021-11-16 15:00:06 · 3997 阅读 · 2 评论 -
el-table表格el-table-column根据不同得值,动态显示不同的颜色以及不同的文字
在表格里面最常见的就是列状态展示,尤其是2个以上状态展示还要区分不同的颜色。这时候我们就不能用三目运算去判断,我们可以使用JavaScript闭包,进行传值操作例如:在computed里面写入:最后实现就是这样:...原创 2021-11-04 10:23:43 · 8271 阅读 · 2 评论 -
vue+element 路由注意的地方
后台项目管理一般进入项目里面首先看到的是首页,首页一般要引进路由,否则会提示报错,每次我这个猪脑子都会忘记引入,而且不记得为什么报错,然后就问身边的小伙伴。。。。报错就是我们没有引入:所以我们就需要引入这个...原创 2021-11-10 15:30:47 · 387 阅读 · 0 评论 -
element自定义背景更换
最近的项目中需要自定义背景更换。可以在element官网查看使用方法,有2中方法,使用了第一种比较简单的,第二种自己尝试了开头没有继续。在这里使用这个方法,在项目中新建一个js文件,并且全局引用在这个element-variables.scss里面内容可以官网复制过来/* theme color */$--color-primary: #1890ff;$--color-success: #13ce66;$--color-warning: #ffba00;$--color-danger: #原创 2021-11-04 15:19:29 · 1394 阅读 · 0 评论