elementui plus 动态form表单添加表单项和动态的验证规则

<el-form :model="state" validate-on-rule-change="false">
    <el-form-item
      :key="item.key"
      :label="item.field"
      :prop=//这里要使用:数据集合list.index.input组件绑定的值的名称的方式去添加prop,例如:"'params.' + idx + '.code'"
      :rules="
        !item.empty
          ? { required: false }
          : {
              required: true,
              message: `${item.field}不为空`,
              trigger: 'blur',
              validator: validateNull
            }
      "
    >
      <el-input v-model="item.code" :disabled="pageType === 'info'" :placeholder="item.field" />
    </el-form-item>
</el-form>
            
<script setup lang="ts">
            
state.params = props.info.params?.map((item: any) => {
      return {
        key: Date.now(),
        field: item.name,
        code: item.value,
        ...item
      }
    })
</script>

 

posted @ 2022-11-25 17:35  洛晨随风  阅读(2411)  评论(4编辑  收藏  举报