el-form表单封装

el-form表单封装

el-form表单封装

<el-form  ref="addForm"  label-position="right"  :model="addForm"  :rules="rules">
    <div v-if="item.isShow"  v-for="(item, index) in formData" :key="index">
        <el-form-item :class="item.redClass":label="item.label" :prop="item.prop">
            <el-input
                    v-if="item.type === 'text'"
                    size="medium"
                    type='text'
                    v-model="addForm[item.prop]"
                    :placeholder="item.placeholder"
                    @blur="blurEvent($event,item.event)"
                   >
            </el-input>
            <el-input
                    v-if="item.type === 'number'"
                    size="medium"
                    type='number'
                    v-model="addForm[item.prop]"
                    :placeholder="item.placeholder"
                    @blur="blurEvent($event,item.event)"
                   >
            </el-input>
        </el-form-item>
    </div>
</el-form>

• 数据格式

  formData:[
      { type: 'number', label: '路径宽度(m):',placeholder:'请输入路径宽度', prop: 'pathRadius',event:'speed_roadSG'},
      { type: 'text', label: '备注:',placeholder:'请输入备注', prop: 'remark'}
  ],

• 输入框方法

   blurEvent(e,type){
      if(type == 'speedLimit'){
          //...doing
      }
  }

赏

谢谢你请我吃糖果

支付宝

微信