vueelement动态表单,vue element table
本文主要介绍了vue ElementUI的form窗体实现登录效果的一个例子。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
:
目录
1.通过ElementUI构建基本样式。2.点击提交按钮，将账户密码框中的内容发送至后台数据摘要。
1.通过ElementUI构建基本的样式
不知道ElementUI的官网。https://element.eleme.cn/#/zh-CN对元素有基本的了解。
1.1 ElementUI的使用首先，通过指令npm i element-ui S在项目中安装element ui.
1.2然后在官网找到from表单，然后就可以布局基本布局了。
这是我写的框架。
el格式
label-position=top
label-width= 100px class= demo-rule form
:rules=rules
:model=rulesForm
状态图标
ref=ruleForm
El-form-item标签=用户名属性=名称
El-input type= text v-model= rules form . name /El-input
/El-表单-项目
El-form-item label= password prop= password
El-input type= password v-model= rules form . password /El-input
/El-表单-项目
El-表单-项目
El-button type= primary @ click= submit form( rule form ) submit/El-button
El按钮复位/el按钮
/El-表单-项目
/el格式
这些代码的相应效果
这里使用了一些ElementUI属性，在边肖中没有解释。都在官网，我放几张截图让你查看这些属性。
然后，规则和模型一起用于为输入框制定一些输入规则。
那么这两条规则就被绑定到了账号密码框。
ui布局到此为止。
2.用点击提交按钮将 将账号密码框内的内容 传给后台数据
我们可以通过ref更好地获取标签中的属性。
下面介绍如何将输入框中的内容转移到后台。
方法：{
submitForm(fromName){
这个。$refs[fromName]。验证((有效)={
如果(有效){
//如果检查通过，在这里把用户名和密码发送到后端。
登录({
名称：this.rulesForm.name，
密码：this.rulesForm.password
}).然后((数据)={
if(data.code==0){
localStorage.setItem(token ，data.data.token)
window.location.href=/
}
if(data.code==1){
这个。$message.error(data.mes)
}
})
}否则{
console.log(错误提交！)
返回false
}
})
}
}
一次登录是我们通过在后端封装一个接口获得的方法。
这个方法被绑定到submit按钮。
然后，我们输入现有的帐户密码，并单击提交按钮登录。
然后我们呈现一些登录信息。
总结
实现一个登录效果分两步：首先用ElementUI构建相应的样式——“点击提交按钮，将账号密码框中的内容转移到后台数据中。”
就是这样。本文介绍了vue ElementUI的form窗体实现登录效果的例子。有关表单中vue元素的更多相关登录内容，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。