＜el-form＞表单前文字对齐&&自写表单表单对齐

一： <el-from>表单文字对齐效果

代码：

<el-form
         :label-position="labelPosition"
          ref="editForm"
          :model="editForm"
          label-width="146px"
          :rules="rules"
          :hide-required-asterisk="false"
        >
          <el-row :gutter="20">
            <el-col :span="8"
              ><el-form-item prop="devName">
                <span slot="label" class="slot_form_label">设备名称</span>
                <el-input
                
                  v-model="editForm.devName"
                  placeholder="请输入设备名称"
                  clearable
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8"
              >
              <el-form-item prop="deviceType">
                <span slot="label" class="slot_form_label">设备类型</span>
                <el-select
                  v-model="editForm.deviceType"
                  placeholder="请选择设备类型"
                  clearable
                >
                  <el-option
                    v-for="item in deviceOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> 
                </el-form-item
            >
              </el-col>
            <el-col :span="8"
              ><el-form-item  prop="ip">
                <span slot="label" class="slot_form_label">IP地址</span>
                <el-input
                  v-model="editForm.ip"
                  placeholder="请输入IP地址"
                  clearable
                ></el-input> </el-form-item
            ></el-col>
        </el-row>
            <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="用品说明类型" prop="protocolType">
                <el-input
                  v-model="editForm.protocolType"
                  placeholder="请输入用品说明类型"
                  clearable
                ></el-input>

              </el-form-item>
            </el-col>
            <el-col :span="8"
              >
              <el-form-item  prop="manufacturer">
                <span slot="label" class="slot_form_label">厂商</span>
                <el-select
                  v-model="editForm.manufacturer"
                  placeholder="请选择设备厂商"
                  clearable
                >
                  <el-option
                    v-for="item in manufacturerOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> </el-form-item
            >
            </el-col>
            <el-col :span="8">
              <el-form-item  prop="ipPort">
                <span slot="label" class="slot_form_label">端口</span>
                <el-input
                  v-model="editForm.ipPort"
                  placeholder="请输入端口号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
              ><el-form-item label="购买时间" prop="purchaseTime">
                <el-date-picker
                  v-model="editForm.purchaseTime"
                  type="date"
                  placeholder="请选择购买时间"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="投滴时间" prop="startWorkTime">
                <el-date-picker
                  v-model="editForm.startWorkTime"
                  type="date"
                  placeholder="请选择投滴时间"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="描述" prop="devDescribe">
                <el-input
                  v-model="editForm.devDescribe"
                  clearable
                  autosize
                  type="textarea"
                ></el-input>
                </el-form-item
            ></el-col>
            
            
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
              ><el-form-item  prop="userName">
                <span slot="label" class="slot_form_label">编成装置用户名</span>
                <el-input
                  v-model="editForm.userName"
                  placeholder="请输入登录用户名"
                  clearable
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item prop="userPassword">
                <span slot="label" class="slot_form_label">编码装置密码</span>
                <el-input
                  v-model="editForm.userPassword"
                  placeholder="请输入登录密码"
                  clearable
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
        </el-form>

//data中
data(){
    return{
        editForm: {
        ip: "",
        manufacturer: "",
        devName: "",
        deviceType: "",
        protocolType: "",
        ipPort: "",
        userName: "",
        userPassword: "",
        startWorkTime: "",
        purchaseTime: "",
        regionId:"",
        devDescribe:""
      },
      rules: {
        devName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在1 到 100 个字符",
            trigger: "blur"
          }
        ],
        deviceType: [
          { required: true, message: "请输入系统类型", trigger: "change" }
        ],
        regionId: [
          { required: true, message: "请输入所属防区id", trigger: "change" }
        ],
        manufacturer: [
          { required: true, message: "请输入系统厂商", trigger: "change" }
        ],
        ip: [
          { required: true, message: "请输入ip地址", trigger: "change" },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))$/,
            message: "请输入正确的ip"
          }
        ],
        ipPort:[{ required: true, message: "请输入端口号", trigger: "change" }],
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "change"
          }
        ],
        userPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change"
          }
        ]
      },
      labelPosition: 'right',
      manufacturerOptions: [
        {
          value: "DD",
          label: "大h花"
        },
        {
          value: "KK",
          label: "康康"
        },
        {
          value: "OTHER",
          label: "其它"
        }
      ],
      deviceOption:[
      {
          value: "普通类型",
          label: "普通类型"
        },
      ]
    }
}

//stylr样式中
<style scoped>
>>>.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width:100%;
}
/deep/ .el-form-item__label{
    text-align: justify;
  }
  /deep/ .el-form-item__label::after{
     content: ' ';
     width: 100%;
     display: inline-block;
   }
  /deep/ .el-form-item__label::before{
    display: none;
  }
  .slot_form_label{
    position: relative;
  }
  .slot_form_label::after{
     content: '*';
     width: 100%;
     display: inline-block;
     position: absolute;
     left: -10px;
     color: red;
  }
  >>>.el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    /* padding-top: 4px; */
    position: absolute;
    top: 65%;
    left: 0px;
}
</style>

 二 自写表单样式

效果图

代码

 <div class="search">
              <div class="input-box">
                <span>告警状态</span>
                <el-select v-model="searchObj.alarmStatus" clearable>
                  <el-option label="未处理" value="OPEN"></el-option>
                  <el-option label="已恢复" value="CLOSE"></el-option>
                </el-select>
              </div>
              <div class="input-box">
                <span>IP地址</span>
                <div class="flex-input">
                  <el-input v-model="searchObj.ip"></el-input>
                </div>
              </div>
              <div class="input-box">
                <span>资源名称</span>
                <div class="flex-input">
                  <el-input v-model="searchObj.resourceName" />
                </div>
              </div>
              <div class="input-box">
                <span>告警等级</span>
                <el-select v-model="searchObj.alarmLevels" clearable>
                  <el-option
                    label="严重"
                    value="alarm_serious_level"
                  ></el-option>
                  <el-option
                    label="一般"
                    value="alarm_commonly_level"
                  ></el-option>
                </el-select>
              </div>
              <div class="input-box">
                <span>资源类型</span>
                <el-select v-model="searchObj.resTypeId" clearable>
                  <el-option label="未处理" value="OPEN"></el-option>
                  <el-option label="已关闭" value="HUMANCLOSE"></el-option>
                </el-select>
              </div>
              <div class="input-box">
                <span>告警指标</span>
                <el-select v-model="searchObj.alarmIndicators" clearable>
                  <el-option
                    label="图像标注状态"
                    value="OSDInfo_osdExist"
                  ></el-option>
                  <el-option label="在线状态" value="onlineStatus"></el-option>
                  <el-option
                    label="录像总保存天数"
                    value="monthRecord_recordTotalSaveDay"
                  ></el-option>
                  <el-option
                    label="昨日录像总结果"
                    value="record_totalResult"
                  ></el-option>
                </el-select>
              </div>
              <div class="input-box">
                <span>处置备注</span>
                <div class="flex-input">
                  <el-input v-model="searchObj.remark" />
                </div>
              </div>
              <div class="input-box">
                <span>发生时间</span>
                <el-date-picker
                  v-model="searchObj.timerange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  clearable
                  value-format="yyyy-MM-dd"
                   format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>

              <div class="btn-box">
                <el-button class="btn-search" @click="search">查询</el-button>
                <el-button class="btn-normal" @click="reset">重置</el-button>
              </div>
            </div>

//data中
 searchObj: {
        timerange:[],
        remark:"",
        alarmIndicators:"",
        resTypeId:"",
        alarmLevels:"",
        resourceName:"",
        ip:"",
        alarmStatus:"",
      },
//script中样式
.search {
  margin-top: 6px;
  text-align: left;
}
.input-box {
  display: inline-block;
  padding: 5px 0;
  font-size: 14px;
  margin-right: 10px;
}
.input-box .el-textarea {
    position: relative;
    display: inline-block;
    width: 360px !important;
    vertical-align: bottom;
    font-size: 14px;
}
.input-box span {
  margin-right: 2px;
  display: inline-block;
  width: 60px;
  text-align: right;
}
.flex-input {
  display: inline-block;
  width: 200px;
}
.el-select {
  width: 200px;
}

.el-date-editor {
  width: 300px;
}

.btn-box {
  display: inline-block;
}