vue表单布局

Posted 2022-08-29 xfpblog

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

优点：自适应

方便以后使用 记录一下

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>