el-form内嵌组件封装部分输入框内容

      <el-form
        ref="submitForm"
        :rules="rules"
        :model="submitForm"
        label-position="right"
        label-width="120px"
      >
        <!--<el-form-item label="客户经理编号" prop="custManagerNo">
          <el-input v-model="submitForm.custManagerNo" placeholder="请输入客户经理编号" />
        </el-form-item>

        <el-form-item label="客户经理名称" prop="custManagerName">
          <el-input v-model="submitForm.custManagerName" placeholder="请输入客户经理名称" />
        </el-form-item>-->
        //  封装上面两个输入框
        <com @inputHandle="inputHandle"/>
      </el-form>    

  data() {
    return {
      submitForm: {},
      rules: {
        custManagerNo: [{ required: true, message: '请输入客户经理编号', trigger: 'blur' }],
        custManagerName: [{ required: true, message: '请输入客户经理名称', trigger: 'blur' }]
      },
      obj: {
        custManagerNo: '',
        custManagerName: ''
      }
    }
  }

  methods: {
    inputHandle(val) {
      this.obj = val
      this.$set(this.submitForm, 'custManagerNo', val.custManagerNo)
      this.$set(this.submitForm, 'custManagerName', val.custManagerName)
    }

 

<template>
  <div>
    <el-form-item label="客户经理编号" prop="custManagerNo">
      <el-input v-model="inputData.custManagerNo" placeholder="请输入客户经理编号" @change="inputChange($event)"/>
    </el-form-item>
    <el-form-item label="客户经理名称" prop="custManagerName">
      <el-input v-model="inputData.custManagerName" placeholder="请输入客户经理名称" @change="inputChange($event)" />
    </el-form-item>
  </div>
</template>

 

<script>
export default {
  name: 'Com',
  props: [
    'obj'
  ],
  data() {
    return {
      inputData: {}
    }
  },
  methods: {
    inputChange() {
      this.$emit('inputHandle', this.inputData)
    }
  }
}
</script>