vue表单布局

最新推荐文章于 2025-05-29 15:04:49 发布

angwabu0057

最新推荐文章于 2025-05-29 15:04:49 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xfpBlog/p/11414625.html

本文分享了一种在项目中发现的自适应表单布局方法，利用IView UI库的Form和Grid组件实现灵活的表单设计。通过调整label-width和使用栅格布局，使得表单能够适应不同屏幕尺寸，同时保持良好的视觉效果和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

优点：自适应

方便以后使用记录一下

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>