elementui el-input动态创建

1,408 阅读1分钟

表单label需要展示的内容,需要从其他地方获取到数据后,v-for动态渲染获得,并且需要必填校验。

//html
<el-form ref="dialogForm" :model="dialogForm" label-width="160px">
    <el-form-item v-for="(item, index) in dialogForm.reason" :rules="rules.reason" :key="index" :label="item.rejectname" :title="item.rejectname" :prop="'reason.'+ index +'.rejectreason'">
      <el-input type="text" placeholder="请输入xxxx" v-model="item.rejectreason" rows="5" style="width: 400px;"></el-input>
    </el-form-item>
</el-form>

//js
data(){
    return{
      dialogForm: {
        id: id,
        reason: [],
        type: 2
      },
      //必填校验
      rules: {
        reason: [{ required: true, message: '请填写xxx', trigger: 'blur' }]
      }
    }
}