软件开发定制el-form的入门学习

el-form软件开发定制的入门学习

知识点

el-form软件开发定制标签的核心元素

  1. :model软件开发定制用于保存表单的数据对象
  2. :rules软件开发定制用于对表单数据对象的校验
  3. ref软件开发定制指定表单对象名称
  4. label-width指定label的宽度
  5. :label-position指定label的位置
  6. :inline软件开发定制指定是否同行
  7. size软件开发定制指定所有组件大小

el-form-item标签的核心元素

  1. label设置内容
  2. prop指定:rules中的属性
  3. required指定必填
  4. :rules可以设置当前prop的校验，一般数值类型的校验可在此单独设置，要指定type:'number'，与v-model.number配合使用,注意点有提及
  5. size指定单一组件大小

注意点

  1. :model的数据属性和:rules的属性相对应
  2. 一个el-form-item中有多个输入框，每个输入框都需要单独嵌套在el-form-item中，此操作可以单独校验每个输入框
  3. 日期类型的数据，校验要指定type:'date'
  4. 选择框的value为数值，校验需要指定type:'number'
  5. 单选按钮和多选按钮为数值，校验需要指定type:'number'
  6. 输入框想要转换成为数值类型，可以使用v-model.number，校验需要指定type:number'
  7. 输入框想要校验邮箱格式，只需要指定type:'email'
  8. 嵌套在el-input中的el-select不能实现联动校验，若想实现联动校验，需要@change自定义调用校验
  9. rules的简单校验有三个属性：required,message,trigger,分别为：是否必填，校验失败提示信息，校验时机
  10. 如果要自定义校验规则，需要属性validator:(rule,value,callback)=>{手动校验代码块},rule参数数据很丰富，为一个Object类型的数据，有field,type,validator,required等属性，value为:model属性的值，callback(str)为要返回的信息
  11. 单选框，多选框，日期框，选择框的校验时机都应该指定为change,符合业务场景
  12. 动态添加或删除form表单的组件，需要动态配置好label,prop,rule的数据，删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1)
  13. 重置按钮：this.$refs['refName'].resetFields();，清空了校验，表单数据也恢复初始值
  14. 校验单个组件：this.$refs['refName'].validateField('propName');进行了单个校验
  15. 校验全部：this.$refs['refName'].validate(valid=>{});表单整体校验，一般提交按钮需要触发全部校验

效果图

代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body>    <div id='app'>        <el-form :model='formData' label-width='80px' :rules='formRule' ref='formRef'>            <el-form-item label='活动名称' prop='name'>                <el-input v-model='formData.name' placeholder='输入活动名称'></el-input>            </el-form-item>            <el-form-item label='活动区域' prop='area'>                <el-select v-model='formData.area' placeholder='输入活动区域'>                    <el-option label='地区1' :value='1'></el-option>                    <el-option label='地区2' :value='2'></el-option>                </el-select>            </el-form-item>            <el-form-item label='开始时间' required>                <el-col :span='11'>                    <el-form-item prop='date1'>                        <el-date-picker v-model='formData.date1' type='date' placeholder='选择日期'></el-date-picker>                    </el-form-item>                </el-col>                <el-col class='line' :span='2'>-</el-col>                <el-col :span='11'>                    <el-form-item prop='date2'>                        <el-time-picker v-model='formData.date2' placeholder='选择时间'></el-time-picker>                    </el-form-item>                </el-col>            </el-form-item>            <el-form-item label='活动天数' prop='dateNum' :rules="[{required:true,message:'活动天数不能为空'},{type:'number',message:'活动天数为数值型'}]">                <el-input v-model.number='formData.dateNum' placeholder='输入活动天数' >                    <el-select v-model='formData.dateType' slot='append'>                        <el-option label='天' value='D'></el-option>                        <el-option label='月' value='M'></el-option>                    </el-select>                </el-input>            </el-form-item>            <el-form-item label='及时配送' prop='flag'>                <el-switch v-model='formData.flag'></el-switch>            </el-form-item>            <el-form-item label='活动性质' prop='xingzhi'>                <el-checkbox-group v-model='formData.xingzhi'>                    <el-checkbox :label='1'>线上王者开黑</el-checkbox>                    <el-checkbox :label='2'>线下旅游</el-checkbox>                    <el-checkbox :label='3'>线下聚餐</el-checkbox>                    <el-checkbox :label='4'>线下KTV</el-checkbox>                </el-checkbox-group>            </el-form-item>            <el-form-item label='特殊资源' prop='ziyuan'>                <el-radio-group v-model='formData.ziyuan'>                    <el-radio :label='1'>线上礼品赞助</el-radio>                    <el-radio :label='2'>线下场地免费</el-radio>                </el-radio-group>            </el-form-item>            <el-form-item label='活动形式' prop='xingshi'>                <el-input type='textarea' v-model='formData.xingshi'></el-input>            </el-form-item>            <el-form-item>                <el-button type='primary' @click='onSubmit'>立即创建</el-button>                <el-button @click='resetFields("formRef")'>重置</el-button>            </el-form-item>        </el-form>        <el-form :inline='true' :model='formData2'>            <el-form-item label="审批人">                <el-input v-model='formData2.name' placeholder='审批人'></el-input>            </el-form-item>            <el-form-item label='活动区域'>                <el-select v-model='formData2.area' placeholder='活动区域'>                    <el-option label='区域1' :value='1'></el-option>                    <el-option label='区域2' :value='2'></el-option>                </el-select>            </el-form-item>            <el-form-item>                <el-button type='primary' @click='onSearch'>查询</el-button>            </el-form-item>        </el-form>        <el-button-group>            <el-button @click='labelPosition="left"'>左对齐</el-button>            <el-button @click='labelPosition="right"'>右对齐</el-button>            <el-button @click='labelPosition="top"'>顶部对齐</el-button>        </el-button-group>        <el-form :label-position='labelPosition' label-width='120px'>            <el-form-item label='用户名'>                <el-input v-model='username'></el-input>            </el-form-item>            <el-form-item label='密码'>                <el-input v-model='password'></el-input>            </el-form-item>        </el-form>        <el-form status-icon :model='formData4' :rules='formRule4' label-width='80px' ref='formRef4'>            <el-form-item prop='pass' label='密码'>                <el-input v-model='formData4.pass'></el-input>            </el-form-item>            <el-form-item prop='checkPass' label='确认密码'>                <el-input v-model='formData4.checkPass'></el-input>            </el-form-item>            <el-form-item prop='age' label='年龄'>                <el-input v-model.Number='formData4.age'></el-input>            </el-form-item>            <el-form-item>                <el-button @click='onSubmit4'>提交</el-button>                <el-button @click='resetFields("formRef4")'>重置</el-button>            </el-form-item>        </el-form>        <el-form status-icon :model='formData5' label-width='80px' ref='formRef5'>            <el-form-item label="邮箱" prop='email'             :rules="[            {required:true,message:'请输入邮箱地址',trigger:'blur'},            {type:'email',message:'请输入正确的邮箱地址',trigger:['change','blur']},            ]">                <el-input v-model="formData5.email"></el-input>            </el-form-item>            <el-form-item v-for='(domain,index) in formData5.domains'             :label='"域名"+index'             :key='domain.key'             :prop="'domains.'+index+'.value'"            :rules="{required:true,message:'域名不能为空',trigger:'blur'}">                <el-input v-model="domain.value"></el-input>                <el-button @click='removeDomain(domain)'>删除</el-button>            </el-form-item>            <el-form-item>                <el-button type='primary' @click='onSubmit5'>提交</el-button>                <el-button @click='addDomain'>新增域名</el-button>                <el-button @click='resetFields("formRef5")'>重置</el-button>            </el-form-item>        </el-form>    </div></body></html><style>    .el-input .el-select {        width: 130px;    }</style><script>    new Vue({        el: '#app',        data() {            return {                name: '',                formData: {                    name: '',                    area: '',                    xingzhi: [],                    ziyuan: '',                    xingshi: '',                    date1: '',                    date2: '',                    dateNum: '',                    dateType: '',                },                formRule: {                    name: [{ required: true, message: '请输入活动名称', triggle: 'blur' }],                    area: [{ type: 'number', required: true, message: '请选择活动区域', triggle: 'change' }],                    date1: [{ type: 'date', required: true, message: '请输入活动日期', triggle: 'change' }],                    date2: [{ type: 'date', required: true, message: '请输入活动时间', triggle: 'change' }],                    xingzhi: [{ type: 'array', required: true, message: '请选择活动性质', triggle: 'change' }],                    ziyuan: [{ type: 'number', required: true, message: '请选择特殊资源', triggle: 'change' }],                    xingshi: [{ required: true, message: '请选择活动形式', triggle: 'blur' }],                },                formData2: {},                username: '',                password: '',                labelPosition: 'right',                formData4: {                    pass: '',                    checkPass: '',                    age: '',                },                formRule4: {                    pass: [{ required: true, validator: this.validatorPass, trigger: 'blur' }],                    checkPass: [{ required: true, validator: this.validatorCheckPass, trigger: 'blur' }],                    age: [{ required: true, validator: this.validatorAge, trigger: 'blur' }],                },                formData5:{                    email:'',                    domains:[                        {key:"domain0",value:''}                    ]                },            }        },        methods: {            removeDomain(domain){                let index = this.formData5.domains.indexOf(domain)                if(index!== -1){                    this.formData5.domains.splice(index,1)                }            },            addDomain(){                let len = this.formData5.domains.length                this.formData5.domains.push({                    key:"domain"+len,                    value:'',                })            },            validatorPass(rule, value, callback) {                if (!value) {                    callback(new Error('密码不能为空'))                }                if (this.formData4.checkPass != null) {                    this.$refs['formRef4'].validateField("checkPass")                }                callback()            },            validatorCheckPass(rule, value, callback) {                if (!value) {                    callback(new Error('确认密码不能为空'))                }                if (value != this.formData4.pass) {                    callback(new Error('密码不一致'))                }                callback()            },            validatorAge(rule, value, callback) {                if (!value) {                    callback(new Error('年龄不能为空'))                }                if (!Number.isInteger(value)) {                    callback(new Error('必须为整数型'))                }                if (value < 18) {                    callback(new Error('年龄未达标'))                }                callback()            },            onSubmit() {                this.$refs['formRef'].validate(valid => {                    if (valid) {                        console.log(this.formData)                    }                })            },            onSubmit4() {                this.$refs['formRef4'].validate(valid => {                    if (valid) {                        console.log('success4')                    }                })            },            onSubmit5(){                this.$refs['formRef5'].validate(valid => {                    if(valid){                        console.log("success5")                    }                })            },            resetFields(formRef) {                this.$refs[formRef].resetFields();            },            onSearch() {                console.log(this.formData2)            },        }    })</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269

官网地址

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发