vue2.0 ElementUI父子组件实现子组件表单校验

vue2.0 ElementUI父子组件实现子组件表单校验

子组件：

< template >
    < div >
    < el - form: model = "form": rules = "rules"
ref = "ruleForm" >
    < el - form - item label = "xxxx"
prop = "fsendtousers" >
    < treeselect v - model = "form.fsendtousers"
style = "width:100%;height:100%;": options = "deptOptions": show - count = "true": multiple = "true"@
select = "selectNode"
placeholder = "请选择xxxx"

/ >
< /el-form-item> < /el-form>
< /div> < /template>
< script >
 import Treeselect from '@riophae/vue-treeselect'
export default {
    name: 'unitTRee',
    components: {
        Treeselect
    },
    props: {
        deptOptions: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            form: {
                fsendtousers: null
            },
            // 表单验证规则
            rules: {
                // 接收单位
                fsendtousers: [{
                    required: true,
                    message: '请选择xxxxx',
                    trigger: 'change'
                }]
            }
        }
    },
    methods: {
            // 表单验证
            formCheck() {
                return new Promise((resolve, reject) => {
                    this.$refs.ruleForm.validate((valid) => {
                        if (valid) {
                            console.log('submit!')
                            resolve()
                        } else {
                            console.log('error submit!!')
                            reject()
                        }
                    })
                })

            }
    }

} < /script>

< style scoped >
    < /style>
//父组件
      //逻辑代码如下
      //触发子组件的函数实现验证
      this.$refs.unitTRee.formCheck().then(res => {
     //这里做你自己的请求逻辑比如提交功能
      }).catch(err => {
          console.log('验证不通过')
      })
      //子组件应用
      <unitTRee :deptOptions="deptOptions" ref="unitTRee"></unitTRee>