vue element 表单左右布局以及遇到的问题

 

1. 标题在左右,输入框在右边,一行展示

这里就要改变饿了么样式了,加上以下代码,就会左右布局,一行展示

/deep/ .el-form-item__content {
  text-align: right;
}

2. 输入框会遇到宽度不一致情况

比如 el-select下拉框,可以给它加上固定宽度

3.在标题后面加上提示图标,因为标题在左边,所以样式要左浮动

<el-form-item label= '123'>
   <span class="spans">
        <el-tooltip placement="right">
           <div slot="content"> 123 / 4576 / 789 / 123 </div>
           <i class="el-icon-question"></i>
        </el-tooltip>
    </span>
   <el-input/>
</el-form-item>
.spans {
  float: left;
  margin-left: -5px;
}

4. button按钮加载

<el-button class="sub-btn" :loading="subLoading" @click="onSubmit('form')">{{subTitle}}</el-button>

定义 
subLoading 初始值 false
subTitle 初始值 下一步

当提交时,表单验证通过, this.subLoading = true, this.subTitle = '加载中,请稍后' 
当接口返回200时,this.subLoading = false, this.subTitle = '加载完成'