zoukankan      html  css  js  c++  java
  • iview表单语法

    html

     <Form :label-width="100" :rules="ruleValidate" :model="editInfo" ref="addNewForm">
                    <Row>
                        <Col span="24">
                       <Form-item prop="name" label="挂件名称">
                            <Input v-model="editInfo.name" style='250px;' placeholder="请输入挂件名称"/>
                        </Form-item>
                        </Col>
                        <br/>
                        <Col span="24">
                        <!-- <Input v-model="editInfo.type" hidden/> -->
                        <Form-item prop="type" label="挂件类型">
                            <Dropdown @on-click="handleType">
                                <a href="javascript:void(0)">
                                    {{editInfo.type? editInfo.type : '请选择挂件类型'}}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <!-- <template > -->
                                        <DropdownItem :name='index' v-for='(item,index) in pendentList' :key='index'>{{item.item_name}}</DropdownItem>
                                    <!-- </template> -->
                                </DropdownMenu>
                            </Dropdown>
                        </Form-item>
                        </Col>
                    </Row>
                </Form>

    js

     data(){
           return{
                openAddNewModal:true,
                ruleValidate: {
                    name: { required: true, message: "请输入挂件名称" },
                    type: { required: true, message: "请输入挂件类型" }
                },
                editInfo:{
                    name:"",
                    type:""
                },
                pendentList:[]
           }
        },
        methods:{
            handlSave(){
                let validated = true;
                this.$refs.addNewForm.validate(valid => {
                    validated = validated && valid;
                });
                if (!validated) {
                    this.$Message.error("请填写完整的信息");
                    return;
                }
            },

     重置表单信息以及去除表单验证提示:

    this.$refs.addNewForm.resetFields();
  • 相关阅读:
    模块化工具require 学习笔记
    学习Jade模板引擎
    通过border来实现各种三角符号
    使用vscode 编译 sass
    Javascript 运行机制
    Vue调试工具 vue-devtools
    MVVM框架
    通信类
    面向对象
    原型和原型链
  • 原文地址:https://www.cnblogs.com/ivan5277/p/12964680.html
Copyright © 2011-2022 走看看