码迷,mamicode.com
首页 > 其他好文 > 详细

vue表单布局

时间:2019-08-26 21:05:56      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:row   nbsp   validate   mit   优点   export   ndt   less   v-for   

做项目的时候发现一种适用于自己的表单布局

优点:自适应

方便以后使用 记录一下

1、Form表单

2、栅格Grid

<template>
    <div>
        <!--label-width设置表单域标签名称的宽度-->
        <Form ref="formValidation" :model="formValidation" :label-width="1">
            <!--使用iviewGrid栅格布局-->
            <!--type="flex" justify="space-between"子元素等宽排列-->
            <Row type="flex" justify="space-between">
                <Col span="4">
                    <Form-item label="监区"> 
                        <Select v-model="formValidation.area">
                           <Option v-for="(item,index) in areaList" :key="index">{{item.label}}</Option>
                        </Select>
                    </Form-item>
                </Col>
                <Col span="4">
                    <Form-item label="人员姓名"> 
                        <Input v-model="formValidation.name">
                    </Form-item>
                </Col>    
                <!--因为时间控件有两个input框的宽度-->
                <Col span="7">
                    <FormItem label="DatePicker">
                       <Row>
                          <Col span="11">
                             <DatePicker type="date" placeholder="Select date" v-model="formValidation.startTime"></DatePicker>
                         </Col>
                         <Col span="2" style="text-align: center">-</Col>
                         <Col span="11">
                             <TimePicker type="time" placeholder="Select time" v-model="formValidation.endTime"></TimePicker>
                          </Col>
                      </Row>
                   </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="space-between">
                <Col span="4">
                    <Form-item label="人员姓名"> 
                        <Input v-model="formValidation.name">
                    </Form-item>
                </Col> 
                <Col span="4">
                    <Form-item label="人员姓名"> 
                        <Input v-model="formValidation.name">
                    </Form-item>
                </Col> 
                <Col span="4">
                    <Form-item label="人员姓名"> 
                        <Input v-model="formValidation.name">
                    </Form-item>
                </Col> 
                <!--为了第一行与第二行对齐-->
                <Col span="7">
                </Col> 
            </Row>
        </Form>
        <Table>
        </Table>
    </div>
</template>        
<script>
export default{
    data(){
        return{
             areaList:[
                  {
                       value:1,
                       label:监狱1
                  },
                  {
                       value:2,
                       label:监狱2
                  }
             ],
              formValidate:{
                  area:‘‘,
                  name:‘‘,
                  startTime:‘‘,
                  endTime:‘‘
             }
        }
    }
}
</script>
<style lang="less">

</style>

 

vue表单布局

标签:row   nbsp   validate   mit   优点   export   ndt   less   v-for   

原文地址:https://www.cnblogs.com/xfpBlog/p/11414625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!