Element-ui
鲜橙多了没
这个作者很懒,什么都没留下…
展开
-
ElementUi的表单校验梳理
1. 表单校验的先决条件:el-form : 绑定model属性(表单数据对象) rules规则(校验)el-form-item:设置prop属性(要校验的字段)el-input: v-model 绑定属性(双向绑定字段)代码: <!-- 卡片 --> <el-card class="card-longin"> <!-- 表单 --> <el-form style=" marg...原创 2021-12-18 11:04:33 · 616 阅读 · 0 评论 -
Element-ui中弹层close事件重置表单数据
目标:在弹层隐藏时(点了表单上的:取消,确定,点了弹层中右上角的关闭,点了ESC,点了弹层的遮罩区域),将表单数据恢复到之前的状态两种方法:1. v-if<el-dialog :visiable="showDialog" v-if="showDialog"></el-dialog>当弹层隐藏时,组件会被v-if销毁,从而清空表单数据注意:v-if的方法虽然非常简单,但组件的销毁和重建会消耗性能2.用<el-dialog>组件的close事件...原创 2021-11-03 15:55:35 · 1669 阅读 · 0 评论 -
Element-ui表格页序号延续递增
不论在表格中如何新增删除表格数据,序号总是从1开始递增排序,原理是根据表格分页中当前页数与当前页条数来计算的,效果如下:但我们想要切换页码时,希望序号是接着上一页的,实现表格翻页序号递增/延续。下面演示如何实现分页切换时序号递增: <el-table-column label="序号" type="index" :index="getIndex"></el-table-column>index属性写明了,如果设置了type=index,那么可以通过传递in...原创 2021-11-02 00:53:56 · 652 阅读 · 0 评论 -
Element-UI中el-tree的使用
写项目时经常会遇到使用el-tree的场景,针对用过的,做个简单记录一,先简单讲一下怎么安装element-ui:1.安装:npm i element-ui2.在main.js中引入样式以及组件:import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.丢个官网在这里,详细可以去查看:Element - The world's m.原创 2021-10-27 22:20:43 · 15622 阅读 · 0 评论 -
表格数据格式化
前提:如果后端给到我们前端的是一个数字类型的状态码(1, 2),那我们就要对后端给的状态码做一些格式化处理,每一个状态码都会有对应的中文说明。我们通过枚举的方式转换成文字1.找到枚举数据存放的文件夹,在组件中导入使用(1:正式,2:非正式)2.用find从hireType中 通过id找到对应的元素的value format(typeNum) { console.log(typeNum) // typeNum:1(id) const it = Emplo..原创 2021-10-22 22:32:58 · 216 阅读 · 0 评论 -
Element-ui 自定义校验规则随笔
一.Element-ui 自定义校验规则1.首先做校验要在我们的 el-form 表单中添加几个重要的属性::model = 'FormData'(数据源):rules="FormRules"(校验规则)ref = 'FormData' (需要验证的表单元素节点)在 el-form-item 表单里添加:prop="name"(需要校验的字段名 )如图所示:2.验证数据分两种:2.1 一种是简单的数据验证,一些不能为空的,必须输入的,验证规则简单的,我们就用简单的校.原创 2021-10-20 20:25:28 · 5409 阅读 · 4 评论