vue+element custom query component

// 
<template>
  <el-row>
    <input-form v-for="(item,index) in options" :key="'dataForm_'+index"> 
      <!-- Input box-->
      <input-form
        :key="index"
        v-if=" == 'input'"
        :data='item'
      ></input-form>
  </el-row>
</template>
<script>
import EventBus from "@/assets/js/"
import InputForm "@/components/dataForm/InputForm"
export default {
  components: {
    InputForm,
  },
  props: {
    /**
      * Form configuration items
      * @param {Object} option configuration parameters, as follows:
      * type: form item type, String, optional value input
      */
    options: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
   return {}
  },
  created() {
   // This is mainly to realize the display and hiding of other subcomponents by the drop-down box    EventBus.$on("refreshDataForm", e => {
      (e);
    });
  },
  // Page destruction event destruction  beforeDestroy() {
    EventBus.$off("refreshDataForm")
    EventBus.$off("handleClick")
  },
  methods: {
   // Update form data    refreshDataForm(item) {
      let data = 
      ((e, i) => {
        if ( ==  &&  == ) {
          [i] = item
        }
      })
    },
    // Response to parent component and data delivery    handleClick(data) {
     EventBus.$emit("handleClick",data)
    },
    // Format data format (required verification can be made on whether required items)    getDataForm() {
     let data = 
     let formObj = {}
     let error = ''
     try {
      (e => {
       if ( === ''input) {
        if ( && !) {
         error = 'Please enter' + 
         throw error
        }
        formObj[] = 
       } else if ( === 'select' ||  === 'dataSelect') {
        if ( && !) {
         error = 'Please select' + 
         throw error
        }
        formObj[] = 
       } else if ( === 'date' ||  === 'dataRadio') {
        if ( && !) {
         error = 'Please select' + 
         throw error
        }
        formObj[] = 
        formObj[] = 
       } else if ( === 'image') {
        formObj[] =  || 
       } else if ( === 'upload') {
        formObj[] =  || 
        if () { // Delete attachment collections, custom names and default names          formObj[] = (',')
        } else {
         formObj['delFileName'] = (',')
        }
       }
      })
      return formObj
     } catch (error) {
      this.$message({ message:error, type: 'error'})
     }
    }
  }
}

<template>
  <el-col>
    <el-col :span="?:boxSpan" v-if="!">
     <el-col :span="?:infoSpan" >
      <el-col :span="?:infoSpan" v-if="!=0">
       <label class="el-form-item_label" :class="{'require': }" v-html=""></label>
      </el-col>
      <el-col :span="?:contentSpan" v-if="!=0">
       <el-input :class="{'base_textarea': }" ="" :type="?'textarea':''" :disable="" :placeholder="setPlaceholder" maxlength="200"></el-input>
      </el-col>
     </el-col>
      <span v-text="title"></span>
    </div>
  </el-col>
</template>
<script>
export default {
 props: {
  // Type input input box  type: {
   type: String,
   default: 'input'
  },
  // Default fence layout 8/24  boxSpan: {
   type: Number,
   default: 8
  },
  // Default fence layout 24/24  infoSpan: {
   type: Number,
   default: 24
  },
  // Default fence layout 8/24  spanSpan: {
   type: Number,
   default: 8
  },
  // Default fence layout 16/24  contentSpan: {
   type: Number,
   default: 16
  },
  /**
   * name keyword
   * type form type
   * label form title
   * content form content
   * readOnly is read-only or not.
   * isHide isHide is hidden by default no
   * textarea Whether text type is default No
   **/
  data: {
   type: Object,
   default() {
    return []
   }
  }
 },
 computed: {
  setPlaceholder() {
   if( && !) {
    return ''
   } 
   return 'Please enter'
  }
 }
}
</script>
<style scoped>
 // Required style .require::after {
  content: '*';
  color:red;
 }
 //The flex layout title is vertically centered .el-form-item__label {
  float:right;
  margin-botton:0;
  line-height: 20px;
  display: flex;
  align-items: center;
  min-height: 40px;
 }
</style>

<template>
  <el-row>
    <data-form :options='searchArray' ref='searchArray'></input-form>
  </el-row>
</template>

<script>
 import EventBus from "@/assets/js/"
 import DataForm "@/components/dataForm/dataForm"
 export default {
  components: {
   DataForm
  },
  data() {
   return {
    // Query menu configuration    searchArray: [
     {
      name: 'personName',
      type: 'input',
      label: 'username',
      content: ''
     },
     {
      name: 'personName2',
      type: 'input',
      label: 'Username 2',
      content: ''
     }
    ]
   }
  },
  created() {
   // Listen to subcomponents to pass parameters   EventBus.$on('refreshDataForm', e => {
    (e)
   })
  },
  destroyed() {
   // Destroy subcomponents and pass them to monitor   EventBus.$off('refreshDataForm')
  },
  methods: {
   // Listen to subcomponent operations   refreshDataForm(e) {
    // Logical code    this.$forceUpdate()
   },
   // Data query   handleQuery() {
     // Get component parameters and return to json format    let searchArray = this.$()
    // If there is a required item, the return value is null, and there is a pop-up prompt at this time    if (!searchArray) {
     return 
    }
    // Query interface logic   }
  }
 }
</script>