表单布局样式

表单布局样式

表单布局样式类型多样，为了方便下次操作，搬上代码

（1）固定布局：页面大小变，表单位置不变

1. 最外层div，里面设置float

 			<div>
              <div style="float:left; padding-left:66px;">
                <i style="color:red"></i>  班级
                <el-select
                  v-model="classId"
                  @focus="ccccc"
                  style="width:300px;margin-right:50px;"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in classIdlist"
                    :key="item.className"
                    :label="item.className"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
              <div style="float:right;">
                <i style="color:red">*</i>  名称
                <el-input
                  v-model="cameraName"
                  placeholder="请输入"
                  style="width:300px;"
                ></el-input>
              </div>
            </div>
             <!-- 第三行 -->
            <div>
              <div style="float:left; padding-left: 40px;">
                <i style="color:red">*</i>  IP地址
                <el-input v-model="cameraIp" placeholder="请输入" style="width:300px;"></el-input>
                
              </div>
              <div style="float:right;">
                <i style="color:red">*</i>  端口
                <el-input v-model="cameraPort" placeholder="请输入" style="width:300px;"></el-input>                
              </div>
            </div>

（2）弹性布局：页面大小变，表单位置跟着变

1. 最外层div设置弹性布局flex，文字与输入框分隔开(div块)

		<div style="display:flex">
			<div class="left">
          <i class="must">*</i>学号
          <br>
          <i class="must">*</i>中文名
          <br>
          <i class="must">*</i>英文名
          <br>
          <i class="must">*</i>性别
          <br>名族
          <br>
          <i class="must">*</i>出生日期
          <br>证件类型
          <br>证件号码
        </div>
        <div class="oinput">
          <el-input v-model="addStudentInfo.studentNo"></el-input>
          <br>
          <el-input v-model="addStudentInfo.cName"></el-input>
          <br>
          <el-input v-model="addStudentInfo.fName"></el-input>
          <br>
          <el-input v-model="addStudentInfo.nation"></el-input>
          <br>
          <el-input v-model="addStudentInfo.certificateNo"></el-input>
        </div>

		<style>
		.oinput {
		  			line-height: 50px;
 		 			margin-left: 1%;
					}
		.left {
					  line-height: 50px;
					  width: 10%;
					  margin-left: 10%;
					  text-align: right;
					}
		</style>

2. 外层div设置position:relative，文字与输入框分隔开(输入框设置margin-right)

		<div class="tab-card">
          <div style="position:relative;left:30%;width:50%;">
            <div style="position:relative;left:7px;">
              <i style="color:red">*</i>设备SN
              <el-input placeholder="请输入" class="oinput" v-model="deviceId"></el-input>
            </div>
            <div style="position:relative;left:30px;">
              <i style="color:red">*</i>名称
              <el-input placeholder="请输入" style="width:150px;margin-right:10px" v-model="rzjName"></el-input>
              <i style="color:red">*</i>IP地址
              <el-input placeholder="请输入" style="width:183px;margin-left:5px" v-model="ip"></el-input>
            </div>
            <div style="position:relative;left:30px;">
              <i style="color:red">*</i>端口
              <el-input placeholder="请输入" style="width:150px;margin-right:20px" v-model="port"></el-input>
              <i style="color:red">*</i>MAC
              <el-input placeholder="请输入" style="width:183px;margin-left:5px" v-model="mac"></el-input>
            </div>
            <div>通讯协议
              <el-select v-model="protocol" style="width:400px" placeholder="请选择协议">
              </el-select>
            </div>
            <div style="position:relative;left:15px;">分辨率
              <el-select v-model="resolutionRatio" style="width:400px" placeholder="选填">
              </el-select>
            </div>
            <div>
              <i style="color:red">*</i>安装位置
              <el-input placeholder="请输入" class="oinput" v-model="area"></el-input>
            </div>
            <div style="position:relative;left:30px;">
              <span style="position:relative;bottom:240px">描述</span>
              <el-input
                v-model="remark"
                class="input"
                type="textarea"
                autofocus
                :rows="13"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-button style="position:relative;left:210px" type="primary" @click="sent">提交</el-button>
          </div>

3. 饿了么自带组件

<div class="tab-card" v-show="bbb">
          <el-row :gutter="20">
            <el-col :span="8" :offset="5">城市：
              <el-input class="oinput" v-model="cameraCity"></el-input>
            </el-col>
            <el-col :span="8">学校：
              <el-input class="oinput" v-model="cameraSchool"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="5">名称：
              <el-input class="oinput" v-model="cameraName"></el-input>
            </el-col>
            <el-col :span="8">IP地址：
              <el-input class="oinput" v-model="cameraIp"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="5">端口：
              <el-input class="oinput" v-model="cameraPort"></el-input>
            </el-col>
            <el-col :span="8">MAC：
              <el-input class="oinput" v-model="cameraMac"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="5">备注信息：
              <el-input
                type="textarea"
                :autosize="{ minRows: 8, maxRows: 8}"
                placeholder="请输入内容"
                v-model="cameraRemarks"
                class="eee"
              ></el-input>
            </el-col>
          </el-row>
          <el-button type="primary" class="btn" @click="change">提交</el-button>
        </div>

i.github.io/flowchart.js/