elementUI
Akimoto Hiroshi
这个作者很懒,什么都没留下…
展开
-
resetFields()不生效的原因
编辑用户新增用户点击编辑的时候,数据回显,没问题:点击取消,会调用方法按理说应该会把表单清空。但是我们再点击新增的时候,数据并没有被清空:原因:点击编辑的时候,一旦执行showModal.value = true, 就显示dialog,然后立马就执行Object.assign(userForm, row)此时数据修改了,但是dialog里面的el-form还没有mounted,也就是说,数据是在form表单mounted之前修改的,那么这个修改后的数据就成为了form表单的初始值。原创 2022-02-24 14:35:41 · 6535 阅读 · 2 评论 -
Tabs 标签页添加删除
点击删除按钮对应的tab和当前高亮tab不一致:点击删除按钮对应的tab和当前高亮tab是同一个:这一步主要是用来确认当前的tab被删除以后怎么计算删除后的高亮tab,算法就是取被删除的tab前面一个tab做为新的高亮tab(出现在被删除tab是最后一个时),或者取被删除的tab后面一个tab做为新的高亮tab(出现在被删除tab不是最后一个时)这里因为删除的是最后一个tab,所以nextTab只能获取到上一个,也就是tab4,然后获取tab4的name做为currentName,并且原创 2021-05-24 16:56:24 · 1153 阅读 · 0 评论 -
ElementUI Tabs 标签页
el-tabs的v-model绑定的属性就是默认显示高亮的标签页的name值原创 2021-05-24 15:43:37 · 568 阅读 · 0 评论 -
elementui 引入后没有任何效果解决之修改vue.config.js配置
项目明明已经全局引入element-ui,样式也引入了,但是就是不起作用,也不报错,发现原来是vue.config.js里面的配置问题:这句代码注释一下就可以正常显示element样式了,不然无论如何都不行requireModuleExtension: false...原创 2021-03-04 09:17:48 · 1653 阅读 · 1 评论 -
elementUI浅谈Tag组件的before-leave属性实现条件跳转页面
在一个el-tabs里,每一个<el-tab-pane>都对应一个name属性,就是这个<el-tab-pane>的编号,比如我们就用0-4来表示这5个<el-tab-pane>,点击一个<el-tab-pane>,el-tabs绑定的v-model="activeIndex"的值就会自动变成对应被点击的<el-tab-pane>的name属性值el-tabs里的:before-leave="beforeTabLeave属性接收一个函数这..原创 2021-01-06 00:04:15 · 7475 阅读 · 2 评论 -
elementUI实现进度条和标签页联动效果
<el-tabs>通过v-model绑定的值activeIndex受到被它包裹的<el-tab-pane>的name属性值的影响: 当用户点击哪个<el-tab-pane>,activeIndex的值就自动改为<el-tab-pane>对应的name属性的值。注意:name值的类型是字符串而上面的进度条<el-steps>的:active绑定的值也是activeIndex,说明activeIndex这个属性被进度条<el-steps>.原创 2021-01-05 19:13:26 · 1339 阅读 · 0 评论 -
element-ui的slot=“append“什么意思
我们看一个例子就明白了效果:修改:效果:原创 2021-01-05 11:15:51 · 4383 阅读 · 0 评论 -
ElementUI级联选择器使用
对于这样的数据:我们使用级联选择器的时候,需要做如下设置:选择一个菜单,打印如下信息,这个信息就是selectCateKeys的值原创 2021-01-03 09:58:23 · 1532 阅读 · 0 评论 -
Vue电商项目开发分类管理功能详解版(一)
1.看看当前所在分支git branch2.新建分支git checkout -b goods_cate3.查看当前所在分支git branch4.把新建的goods_cate分支推送到云端git push -u origin goods_cate新建一个Vue组件:<template> <div>商品分类</div></template><script>export default { data()原创 2021-01-02 23:57:01 · 492 阅读 · 0 评论 -
ElementUI爬坑之表单验证失败报错
在使用elementUI表演验证时候有个容易犯错的坑:el-input中输入什么都会报错验证不通过,原因如下:我们设置需要验证的字段对应的变量,本例中就是addCateForm对象中的cat_name,变量名字一定要和验证规则对象中的规则名字保持一直,不然就会因为找不到而一直报错,上述代码这样改就可以了:修改后的效果:...原创 2021-01-02 18:27:06 · 1113 阅读 · 2 评论 -
ElementUI爬坑之级联选择器高度占满浏览器
做项目时候发现一个问题:由于数据较多,级联选择器高度占满了浏览器解决办法:在global.css中配置全局样式:修改后的效果:原创 2021-01-02 16:07:36 · 395 阅读 · 8 评论 -
Element UI 表单预验证功能
需要在addUser方法里调用表单的validate方法进行预验证:看下效果:原创 2020-12-31 16:32:48 · 242 阅读 · 0 评论 -
Element UI 重置表单功能
这个功能比较简单:先给表单<el-form>取个名字ref="addUserFormRef",再给<el-dialog>对话框设置监听关闭事件函数addUserDialogClosed:在函数中我们只要调用addUserFormRef的resetFields()方法就可以在表单关闭的时候重置表单内容了效果:...原创 2020-12-31 16:23:50 · 1609 阅读 · 0 评论 -
Element UI 自定义校验规则
比如我们有个需求,要验证邮箱和手机号:我们需要在data中非return{}的部分定义两个方法作为验证字段的规则:方法接收3个参数,rule,value和cb,其中value是要验证的字段的值,cb是验证以后的回调函数如果值可以通过正则校验,就return cb()否则调用cb并且传入一个错误对象实例接着在校验规则对象中,在具体的校验规则数组里添加一个校验规则对象,通过validator指定自定义的校验规则方法:效果:上代码:<!-- 添加用户对话框 --> &l原创 2020-12-31 16:10:48 · 4345 阅读 · 3 评论 -
ElementUI Dialog控件属性解释
原创 2020-12-31 15:02:35 · 1516 阅读 · 0 评论