vue表单布局

Posted xfpblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于vue表单布局的主要内容,如果未能解决你的问题,请参考以下文章

element-ui表单布局

VUE项目实战10绘制登录组件-表单篇

[Vue项目实战]登录功能实现

vue-antd-admin框架(二) 布局与页面渲染

vue+Ts+element组件封装

3.1.3 QFormLayout表单布局(窗体布局)