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表单布局的主要内容,如果未能解决你的问题,请参考以下文章