iview 组件的用法

form表单的使用

- 这里的ref是用来获取这个form表单的- :model=" " 这里面的值是一个对象  - :rules=" " 这里面是写验证内容可以参考iview官网[form](http://v1.iviewui.com/components/form)- label 这里是用来写标题的- prop这个应该要跟你formValidate中的属性一致（也就是你v-model中的值）<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"><FormItem label="Name" prop="name"><Input v-model="formValidate.name" placeholder="Enter your name"></Input></FormItem>
</Form>       export default {data () {return {formValidate: {name: '', }，- 这里的ruleValidate一定要跟上面的rules中的变量一致- ruleValidate: {- 这个name一定要和prop中的变量一致- type:这个值可以不写，他的值就是你上面prop那行填入的数据类型。如果你上面填了但是还是报错那你就给他加一个type类型，一定要符合你上面prop下的数据类型name: [{ required: true, message: 'The name cannot be empty', trigger: 'blur',type:}]}}}methods: {handleSubmit (name) {- 这行` 固定写法 ： this.$refs[name].validate((valid)`代码非常重要，比如你点击按钮的是时候，若给他设置了prop，你却没有填入值。那么你是不会往下执行的。- this.$refs[name].validate((valid) => {if (valid) {this.$Message.success('Success!');} else {this.$Message.error('Fail!');}})},handleReset (name) {this.$refs[name].resetFields();}}，- 这行`固定写法：this.$refs[name].resetFields();`是重置你上面prop下面的值，执行这个函数会清空prop下面的值handleReset (name) {this.$refs[name].resetFields();}}

iview 组件的用法相关推荐

react native 组件之switch组件的用法
写项目需要用到RN的switch组件,在官方文档上大概看了下,主要讲的就是switch组件的一些样式,还有调用的方法:onValueChiange,但关于怎么切换开关,怎么调用等,都没有提到..无奈 ...
delphi xe2 project菜单怎么没有加组件功能_交互设计：让人困惑的三大交互组件及用法...
本篇文章中,笔者带我们了解了三大交互组件专有名词的用法,并结合实际案例进行了解释说明,与大家分享.希望通过此文能够加深你对交互组件及其用法的理解和分析. 最近有很多同学来问一些设计中组件的专业名词,发 ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
iview 组件设置头像更换
基于iview 组件设置头像更换 <div style="width: 100%;height:100%;"><div s ...
iView 中 render 用法总结
iView中render用法总结场景在列表数据当中,当我相对列表中某一个单元格进行操作的时候,我可以可以使用render函数来灵活的改变单元格的样式,或者是显示的文本,亦可以让单元格可以直接编辑 ...
Vue使用iview组件库
Vue使用iview组件库步骤一.使用npm下载ivew组件库 npm install --save iview 步骤二.在main.js中配置iview //导入iView组件库 import i ...
IVIEW组件中Table单元格可编辑、加入各种图表
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:https://gitee.com/wlovet/table-project 一.Render函 ...
Antd 组件Switch用法及代码记录
前言 switch开关按钮 android也有这个组件最近开发web用到此组件,用法有些不同在此记录一下实现效果静态数据在vue中< template> 标签直接三木表达式即可完 ...
iview组件安装、加载，以及关于iview的校验规则和相关校验函数
安装iview 1.安装依赖 (1) 从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入node -v 命令,查看no ...

iview 组件的用法

iview 组件的用法

iview 组件的用法相关推荐

最新文章

热门文章