![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element
逻辑鬼才不太聪明
小码农
展开
-
element文件的下载
实现效果点击下载按钮后实现下载文件实现步骤设置移入后展示的标签,绑定点击事件 handleDownload(file),file 是文件的相关信息<span class="el-upload-list__item-actions" style="font-size: 16px; padding: 0 10px"> <span v-if="!disabled" class="el-upload-list__item-download" style="margin原创 2022-03-14 15:32:40 · 2903 阅读 · 0 评论 -
时间选择器开始时间判断不能大于结束时间
预览效果实现过程<el-form-item label="申请日期" prop="applyTime"> <el-date-picker type="date" v-model="dataForm.applyTime" :disabled="disabled" value-format="yyyy-MM-dd" placeholder="申请日期" format="yyyy-MM-dd" :picker-options="s原创 2022-03-14 13:07:02 · 740 阅读 · 0 评论 -
elementUI 上传文件展示自定义的预览图
效果:展示自定义的预览图第一步:<div slot="file" slot-scope="{file}"> // 图片展示 <img src="" alt="" :src="file.url" class="el-upload-list__item-thumbnail" > // 文件名称 <p class="file-title" style="text-align: center;">{{f原创 2022-03-07 15:53:56 · 2829 阅读 · 1 评论 -
element文件的下载
实现效果点击下载按钮后实现下载文件实现步骤设置移入后展示的标签,绑定点击事件 handleDownload(file),file 是文件的相关信息<span class="el-upload-list__item-actions" style="font-size: 16px; padding: 0 10px"> <span v-if="!disabled" class="el-upload-list__item-download" style="margin原创 2022-03-07 15:53:37 · 2396 阅读 · 0 评论 -
Element下拉框选择后不显示勾选
bug样式问题出现的原因根据别人文档的了解,是由于弹出层中的数据是通过循环调用接口得到的,嵌套的层级过深导致,当点击选项数据后render 函数没有自动更新,通过手动的刷新可以解决问题我自己的解决方案借鉴的文档ElementUI 下拉选项框选择数据后不回显选中...原创 2022-02-24 17:06:22 · 1501 阅读 · 0 评论 -
element 表单各种正则校验
表单监听控制输入框长度userName: [ {required: true, message: '应急人员名称不能为空', trigger: 'blur'}, { min: 2, message: '长度不小于 2 个字符', trigger: 'blur' }, { max: 10, message: '长度不大于 10 个字符', trigger: ['blur', 'change'] }],监听手机号输入格式校验mobile: [ {required: true, mess原创 2022-02-24 16:14:22 · 2748 阅读 · 0 评论 -
element input限制只能输入数字
一、效果目前这个el-input 属性只能输入数字。二、参考资料以及理解参考资料操作思路:oninput:这是一个input 输入框在输入内容时会执行的事件(在输入框输入内容时就会触发 oninput)对输入框内容进行监听,监听输入内容的格式,这里使用正则进行限制操作blur: 监听输入框失去焦点当输入框失去焦点时,将输入框中的内容进行保存操作步骤:oninput="value=value.replace(/^\.+|[^\d.]/g,'')"@blur="salaryChan原创 2022-02-24 16:12:39 · 12021 阅读 · 1 评论 -
根据字典表获取所有数字对应的数据
功能描述:此列中的数据是从字典表中获取的,但是获取的都是数字,而显然需要获取数字对应的文字信息,使用 下边这种方式获取数字对应的信息,可以实现对于单个数据的获取,但是对于,多个数字且要获取到对应的多个文字信息,使用下面的方式是无法实现的。<template slot-scope="scope"> <!--这种方式是直接获取字典表中此项数据对应的文字信息,存在局限性,对于多个数据的情况无法获取--> <span>{{ trans原创 2022-02-24 14:19:51 · 398 阅读 · 0 评论 -
element 表单校验
表单监听控制输入框长度userName: [ {required: true, message: '应急人员名称不能为空', trigger: 'blur'}, { min: 2, message: '长度不小于 2 个字符', trigger: 'blur' }, { max: 10, message: '长度不大于 10 个字符', trigger: ['blur', 'change'] }],监听手机号输入格式校验mobile: [ {required: true, mess原创 2022-02-23 15:58:43 · 115 阅读 · 0 评论 -
Element实现省市区三级联动
一、实现效果二、参考数据el-cascader省市区三级联动 三、实现方法npm install element-china-area-data -S<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">原创 2022-02-23 15:53:58 · 1696 阅读 · 1 评论