上周换到新项目组,依然是vue,不过是搭配element-ui. 这两天开始用el-form,发现了个问题. 就是我的表单确定提交之后,需要重置表单,一开始我没看熟API,直接将form对象手动赋成初始值,但是这样的问题是再打开每个el-form-item还是校验成功, 这时我发现了resetFields方法(对整个表单进行重置,将所有字段值重置为初始值并移除校验结果),于是改用这个方法. 改了之后出现了另一个问题,其他字段都重置了,但是有一个form-item里面放的是checkbox,我给的…

在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使用的并不是之前的版本啊,有人说是添加scoped的原因,去掉之后确实可以了,但我还是想添加scoped, 所以我修改之后是: <style lang="stylus" scoped> .el-table >>> .headerColor background…

项目中有‘新增’和‘编辑’弹出dialog功能,并且为同一个dialog. html代码: 新增时,这样的样式 编辑时,这样的样式 所以在编辑完关闭dialog后,需要清空表单,一开始简单的使用了element-ui自带的resetFie(在关闭dialog之前),如下 this.$refs.diamondForm.resetFields(); 但是测试的过程中,跟想象中的并不一样,多次出现清空不彻底的问题. 后来,借用element-ui的open事件 @open="openDialog&qu…

问题: elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据; elementui 设置rules后没有效果 解决方法: 1.表单加ref属性 <el-form ref="refname"></el-form> 2.form的每个item加prop属性(踩了好久的坑这个,需要和绑定数据的最后名称一致,prop属性添加到form-item上) <el-form-item prop=&…

1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种: 法一:使用关键字“/deep/” 1)在当前页面添加样式: <style lang="scss" scoped> 自定义类名 /deep/{ element ui选择器类名{ 样式 }} </style> 2) :在其他页面写样式再导入到所需页面scss文件写法: .xx /deep/{ element ui选择器类名{样式}} .vue页面引入必须加上scoped:<style l…

本人开发的系统中有个添加数据与编辑数据的功能.为了减少代码量,两者使用了同一个dialog,通过不同按钮点击使用对应的方案进行显示. 对了方便,本人在添加数据的按钮的click事件中直接写入了resetFields. 之后正常运行过一段时间,但是就在最近(添加了很多代码)开始报错: TypeError: Cannot read property 'resetFields' of undefined 同时我发现,只要显示过一次dialog,后面就不会报错了.所以我可以确定是因为代码量过大,对应的对…

this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" :model="form"> </el-from> 2 el-form-item 组件没有添加 prop 属性 <el-form-item prop="name"> <el-input v-model.trim="form.n…

添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误: 那么,你只需要加上这段话即可 this.$nextTick(()=>{ this.$refs.addArray.resetFields(); }) 再此,我顺便说一下resetFields和clearValidate的区别: this.$refs.form.resetFields(); //移除表单校验并初始化表单,一般用于添加 this.$refs…

先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭着自己的能力还都能解决掉,使用起来也很丝滑柔顺. 而听说Ant Design和React更配哦,但是也说一下使用Ant Design的感觉吧,首先个人觉得Ant Design给的demo有点乱七八糟,可能是React本身js和DOM混在一起跟人的感觉就不够清爽吧,如下图: 下图是element-ui…

方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增.编辑功能.分页.筛选项.自定义显示表格数据等功能. 先上演示图片 ---------------------------------- 筛选部分 ----------------------------------------------------------- 自定义按钮部分 -------------------------------- 表格主体部分 -----------…