vue表單布局

做項目的時候發現一種適用於自己的表單布局

優點：自適應

方便以后使用 記錄一下

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>