anpinjingyuan-ui/src/combination/formComponent.vue

<template>
  <div>
    <el-form :model="form" ref="form" style="display:flex;flex-wrap: wrap">
      <el-form-item
        v-for="(item,index) in formOption" :key="index" v-if="(index+1) <= inDex"
        :prop="item.label"
        :label="item.name"
        :label-width="item.labelSize + 'px'"
        :rules="item.rules"
      >
        <el-input v-model="form[item.label]" v-if="item.inputType == 2" :style="{ width: item.width + 'px' }" size="small" :placeholder="'请输入'+item.name"></el-input>
        <span v-if="item.inputType == 1">
          <el-select v-model="form[item.label]" slot="prepend" placeholder="请选择">
            <el-option v-for="(item,index) in dataList[item.label]" :key="index" :label="item.fName" :value="item.fId"></el-option>
          </el-select>
        </span>
        <el-input
          v-if="item.inputType == 4"
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="form[item.label]">
        </el-input>
        <div style="width: 100%;display:flex;" v-if="item.inputType == 5">
          <el-input v-model="number" placeholder="请输入内容" @input="spellNumbers(item.label)"></el-input>
          <span style="padding-left: 10px;padding-right: 10px">至</span>
          <el-input v-model="numBer" placeholder="请输入内容" @input="spellNumbers(item.label)"></el-input>
        </div>
        <el-date-picker
          v-if="item.inputType == 3"
          v-model="form[item.label]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'formComponent',
  props:['formOption','dataList','inDex'],
  data() {
    return {
      form:{},
      numBer:'',
      number:'',
    };
  },
  methods: {
    returnToForm(){
      this.$emit('returnToForm', this.form)
    },
    spellNumbers(name){
      this.form[name] = [this.number,this.numBer]
    },
    //表单验证
    submitForm(form) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit('submitForm')
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>