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 = '加载完成' 


Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐