如何在日期时间选框中禁止选择一定的时间范围首先看一下官方文档中 picker-options 相关的介绍红圈中 disabledDate 方法就是禁用规定日期的配置项，该方法参数为当前所有的日期，方法使用如下/* 日期时间组件 */
<el-date-picker
value-format="yyyy-MM-dd"
:picker-options="pickeroptions"
ran
转载
2024-04-21 10:14:44
1300阅读
一、问题使用ElementUI后，相关图标出不来；在项目中部分页面的css中使用了backgroud-image:url(xxx/xxx.jpg)，在生产环境中不显示；ElementUI体积过大，导致Webpack打包后的js有1M多；二、目标找出原因，解决该bug；找到替代方案，方便兼容几种类型的图片加载；ElementUI改成按需加载；三、方案在DEV模式下，访问项目，发现会报："failed
转载
2024-03-21 14:48:49
41阅读
目录Radio 单选框Checkbox 多选框Input 输入框InputNumber 计数器Select 选择器Cascader 级联选择器Switch 开关Slider 滑块TimePicker 时间选择器DatePicker 日期选择器DateTimePicker 日期时间选择器Upload 上传Rate 评分ColorPicker 颜色选择器Transfer 穿梭框Form 表单内容Rad
转载
2024-03-06 22:13:31
187阅读
一：安装及引入1.1安装方式一：用CDN引入<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib
转载
2024-09-03 10:58:23
113阅读
本节课完成user页面下的diolog表单，表单里的元素都是动态渲染，以一个CommonForm组件的形式放入user页面。1.CommonForm组件新建CommonForm.vue组件，添加props，用于接受3个参数，formLabel为一个数组，form的相关配置，form的表单数据，类型为Object，表单布局inline，为一个布尔值。el-form添加属性，首先是ref标识，可以通过
转载
2024-04-08 08:52:41
1624阅读
查看报告功能的开发去element组件里找到Dialog对话框的嵌套的Dialog，对于确实需要嵌套Dialog的场景，我们提供了append-to-body属性，将内层Dialog的该属性设置为true，它就会插入至body元素上，从而保证内外层Dialog和遮罩层级关系的正确，复制一个div，id=report，新增的代码如下图：两层dialog定义完之后，要在内部的dialog里填充内容了，
转载
2024-05-07 16:47:46
370阅读
前言：按照项目需求，多处都会使用dialog+form组件，而form大多都会有重置需求，但点击重置按钮，有的时候resetFields方法就仿佛失效一样。首先需要明白resetFields方法是将表单重置为form组件dom刚渲染时的初始值本文实现的重置是：1、以新增按钮打开弹窗，将数据重置为数据1（是数据的所有值都为pa.dialog.form中自定义的默认值）2、以编辑按钮打开弹窗，将数据重
什么是插槽简单理解就是“ 替换”，使用组件时能替换一些指定内容比如：有一些组件是一些通用的布局模板，每个展示的内容都不是固定，这时候就可以使用Vue提供的插槽功能插槽的功能就是把组件的元素替换成传入的内容，内容可以是：文本、html、组件注意：插槽的使用一般都在使用组件的时候一、初次使用插槽有一些组件是一些通用的布局模板，每个展示的内容都不是固定，这时候就可以使用Vue提供的插槽功能插槽的功能就是
转载
2024-10-10 10:23:05
129阅读
Vue2弹框-动态表单渲染开头废话该动态表单弹框组件是公司UI规范和目前涉及到的场景进行编写的，也是为了减少样式和代码量。当我写这篇文章的时候其实已经能完成大部分需求了。在此也只是记录以下，下面整体说明在公司文档里也有记录的，以方便后人维护使用。代码实现FormDialog.vue代码如下<template>
<el-dialog
:close-on-click-mo
转载
2024-03-05 11:55:11
142阅读
表格表单1 背景有时候可能会有一些需求需要可编辑一张表格，表格的提交可能是按行来提交，也可能是整张表格提交。 按行来提交 整张表格的数据一起提交2 类似于以上这种场景都需要用一个表单去嵌套一个表格，这种嵌套表格在绑定数据的时候需要注意以下两点，如下图：el-form-item 的 prop 绑定为各自行上的属性，idx为当前行号，这样绑定 prop 不会修改同一个引用对象。在校验的时候也可用于区分
转载
2024-07-02 10:02:21
93阅读
vue+element ui技术栈的小伙伴们，在平时项目里，特别是OA项目，会大量用到表单以及表单校验。经常会处理一些必填项，对它们是否有值的判断显得有些繁琐和臃肿，本文将封装方法，解决该问题。最近业务中频繁增加必填项，之前的常规做法就是在提交、修改或者其他操作之前，判断必填项是否填写，做个拦截： 在每一个操作之前加上这些必填项的验证，如果有少量的必填项，可以这样处
转载
2024-05-07 14:52:20
95阅读
问题解读如题，其实2.15.11这个版本的Element UI新增了功能，改进WebStorm IDE和其他JetBrains IDE中的代码帮助。本义是想很好的支持IDE软件，代码提示更加方便，但作者发布时候少打包了一个文件，这就导致Webstorm不认识所有的el-xxx标签！！！解决（方案一）既然知道了这个版本有点小问题，那就简单粗暴，暂时降级到2.15.10版本，提示就有了。等过段时间官方
elementUI中的表单相关问题
一、用法1、动态表单调用接口返回表单，后端的接口返回值如下： 这些是渲染后的效果 页面使用（父组件）<el-button size="small" class="Cancelbtn" @click="sub(true)">发起新的</el-button>
转载
2024-05-23 20:36:35
55阅读
设计目标配置化我们希望把表格的内容，验证规则,甚至于表单的样式，格式都能更规则化，配置化，这样后续我们可以通过构造json去实现一个表单，甚至可用实现拖拽式的构造表单。参数简单尽量减少json的层级，减少json的参数，字段更加语义化。自由度json其实是一套自由度的很少的规则，但是vue则我们提供更多的自由度，比如h函数，比如动态组件，利用这些方法我们可以实现更高的自由度。我的实现过程表单项的格
转载
2024-03-28 09:46:07
364阅读
经过了将近一年的后台产品经历，踩了很多坑，试了很多错，也学习到了很多东西，目前也形成了自己的一套规范。本文将其中的部分收获汇总成文，希望能够对大家有所帮助。
后台产品有一个很重要、常见的元素，就是表格。表格承担着详情入口、数据展示的功能，看似简单，其实里面的细节特别多。在以效率为最重要的需求的后台产品中，如何设计一个能够高效率地进行查看和编辑的表格，考验着每一个后台产品经理的基本功。通
转载
2024-07-26 08:19:27
110阅读
这里写自定义目录标题1.效果图2.HTML代码3.JS代码 1.效果图2.HTML代码// An highlighted block
<template>
<div>
<el-button type="info" plain icon="el-icon-sort" @click="listOpen" size="mini">展开/折叠</el
转载
2024-06-20 12:16:09
200阅读
利用element-ui的表格实现复杂合并单元格之二前言效果图实现代码数据格式 前言哈哈哈哈哈哈，为什么是之二呢，因为以前还有一篇，第一篇合并单元格的时候只考虑了当前列需要合并的数量，不知道我在说啥是吧，那就算了。效果图效果图解读：监测主体相同的需要合并，交易对方是以监测主体相同为前提条件合并，上限金额是仅当为翰林汇的时候才需要合并。实现代码思路就是从头遍历到脚，比较一下当前的值和上一个值是否相
转载
2024-04-10 13:44:42
116阅读
Vue 2 的技术支持会持续多久？从官方发文来看，Vue 2.7 是当前、同时也是最后一个 Vue 2.x 的次级版本更新。Vue 2.7 会以其发布日期，即 2022 年 7 月 1 日开始计算，提供 18 个月的长期技术支持 (LTS：long-term support)。在此期间，Vue 2 将会提供必要的 bug 修复和安全修复，但不再提供新特性。Vue 2 的终止支持时间是 2023 年
转载
2024-08-08 14:55:10
0阅读
ElementUI安装与使用指南
Form表单
点击下载learnelementuispringboot项目源码
效果图el-form.vue（Form表单）页面效果图项目里 el-form.vue代码<script>
export default {
name: 'el_form',
data() {
var checkAge = (rule, value, call
<el-form ref="form" :model="form" :rules="rules" label-width="0px" class="demo-ruleForm"> <el-form-item prop="username"> <el-input v-model="form.username" pla
原创
2023-02-22 11:00:39
123阅读
