Vue element-ui父组件控制子组件的表单校验
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
方法一:
父组件代码:
<template>
<div>
<child-form ref="childRules" :addForm="addForm" > </child-form>
<el-button @click="saveForm()" size='medium'>保 存</el-button>
</div>
</template>
<script>
import childForm from './childForm'
export default {
data(){
return {
addForm: {
name:"",
desc: ""
},
}
},
//组件引用
components: {
childForm
},
methods:{
//保存校验
saveForm() {
let flag = this.$refs['childRules'].validateForm();
if(flag){
console.log(this.addForm);
}else{
this.$message.error('保全信息不完整,请继续填写完整');
}
},
}
}
</script>
<style></style>
//子组件代码
<!-- -->
<template>
<div class="form-content">
<el-form :model="addForm" :inline="true" :rules="formRules" ref="ruleForm"
size='mini' label-width="120px" class="form-mini">
<el-form-item label="名字" prop='name'>
<el-input v-model="addForm.name" ></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: '',
props: {
addForm: {
type: Object,
default: function () {
return {
}
}
}
},
data() {
//这里存放数据
return {
formRules: {
name: [{
required: true,
message: '请输入',
trigger: 'blur'
}]
},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//过滤器
filters: {},
//方法集合
methods: {
//子组件校验,传递到父组件
validateForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}
}
}
</script>
<style lang='less'>
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)