弹出的编辑框进行校验,如果输入框不满足条件,点击“确定”按钮就会直接关闭此对话框。此时使用“footer”就可以解决这一问题。

<Modal v-model="showAddEdit1" title="添加/编辑 属性" @on-ok="btnokProperty1" @on-cancel="cancel1">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="属性名" prop="name">
            <Input v-model.trim="formValidate.name" placeholder="请输入属性名称"/>
        </FormItem>
        <FormItem label="分值" prop="integral">
            <Input v-model="formValidate.integral" placeholder="请输入可加分值" style="width:80%"/><h1 style="display : inline">&nbsp;&nbsp;&nbsp;分</h1>
        </FormItem>
        <FormItem label="备注" prop="remark">
            <Input v-model="formValidate.remark" placeholder="请填写备注(可选项)"/>
        </FormItem>
    </Form>
    <div slot="footer">
      <Button type="text" size="large" @click="cancel1">取消</Button>
      <Button type="primary" size="large" @click="btnokProperty1">确定</Button>
    </div>
</Modal>

 详细内容明天继续总结。

 

Logo

前往低代码交流专区

更多推荐